html - 我如何像记事本一样设置 table 的样式？

我想在我的页面上创建这个记事本的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>的bg img。
然后只需创建一行作为行（将有两个图形，一个用于col1和col2-因此当创建新行时，两列的bg都将填充），这样它就可以根据需要垂直缩放。最后一组，我还有两张图片。一个是给col1的。一个用于col2（这是常规行，但宽度稍窄），旋度为col3。
有没有一种可伸缩的方法可以做到这一点，只使用css和html（没有js或jquery）？
谢谢。
或者有没有其他方法来创建相同的东西，而不必使用bg图像-仅仅使用css？

最佳答案

使用表格来做这件事可能是不正确的（我假设你的“记事本”中没有表格数据）；相反，一个简单的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），只需用<div>s替换html5特定的元素。

关于html - 我如何像记事本一样设置 table 的样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3800026/