如何像记事本一样设置表格样式？答案

【问题标题】：How do I style a table like a notepad?如何像记事本一样设置表格样式？
【发布时间】：2011-06-09 02:25:11
【问题描述】：

我想在我的页面上创建这个记事本的 CSS/HTML 版本：

我正在考虑使用这样的简单表格：

<div id="notepad">
        <table> 
            <thead id="tbl_header">Comments</thead>     
            <tr></tr>
            <tr>
                <td class="col1">Dot</td>
                <td class="col2">Text for column 2</td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr> 
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
            </tr>
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                     <td class="col3"></td>
            </tr>
        </table>    
    </div>

所以我想的是切割图形。拥有顶部，成为<thead> 的背景图片。然后只需将其中一条线创建为行（将有两个图形，一个用于 col1 和 col2 - 因此当创建新行时，将填充两列的 bg），以便它可以根据需要垂直缩放。然后，对于最后一组，我还有两个图形。一个用于 col1。一个用于 col2（这是常规行，但宽度稍窄），卷曲是 col3。

有没有一种可扩展的方式我可以做到这一点，只使用 CSS 和 HTML（没有 JS 或 jQuery）？

谢谢。

附：或者是否有另一种方法来创建同样的东西而不必使用 bg 图像 - 并且只使用 CSS？

【问题讨论】：

标签： html css

【解决方案1】：

使用表格来执行此操作可能不正确（我假设您的“记事本”没有填充表格数据）；相反，一个简单的 HTML5 <section> 就足够了：

<section class="notepad">
    <header><h1>Comments</h1></header>
    <!-- Your text here -->
    <footer>&nbsp;</footer>
</section>

使用适当的 CSS，这很容易变成“记事本”：

.notepad, .notepad>* {
    margin: 0;
    padding: 0;
    overflow: auto;
}
.notepad {
    background: url('middle-part.png');
}
.notepad header {
    background: url('top-part.png');
}
.notepad footer {
    background: url('curl-part.png');
    float: right;
    /* Set a correct size as well. */
}

未经测试；可能需要一些调整。请务必正确设置line-height，以使文本不会与行行重叠。如果您使用的是 HTML4（甚至是 XHTML，shrug），只需将 HTML5 特定的元素替换为 <div>s。

【讨论】：

有趣。你说的对。没有特别需要表格数据，除了我需要文本看起来像是写在记事本上（即整齐地在行上）。将研究这样的实现。谢谢。
视觉表示不会使其成为表格。一般的想法是 HTML 应该是语义的和非表示的，即 HTML only 是“什么”，而不是“如何”。使用line-height 属性可以使文本整齐地排列在行上。
顺便说一句@You...快速提问。符号.notepad>* 基本上意味着具有“记事本”类的元素的所有子元素，对吗？从 CSS 的第一行开始。谢谢。
@marcamillion：是的，所有的直接孩子。请注意，这与.notepad * 不同，后者选择所有个子级（无论级别如何）。在此处阅读有关选择器的更多信息：css.maxdesign.com.au/selectutorial

【解决方案2】：

您似乎希望内容具有垂直节奏。实现起来很辛苦，但做起来很有意义。基本上，您选择一个 line-height，然后使所有内容的垂直高度是您选择的 line-height 的倍数。这是一个可能更好地解释它的链接以及我使用的一些工具：

【讨论】：