html - 如何用 CSS 沿对 Angular 线或垂直方向打断表格？

Question

如果你有一个 <table>要么非常高要么非常宽，您希望将其包裹起来以显示在屏幕上。如何使用 CSS 实现这一点？

示例:一个 300% 页面高度和 30% 页面宽度的表格将被分成三部分。

#
#
#
#
#
#

到

# # #
# # #

我正在寻找纯 CSS 解决方案，这可能吗？

编辑:HTML 示例

<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
            <th>Baz</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>6</td>
            <td>1</td>
            <td>5</td>
        </tr>
        <tr>
            <td>42</td>
            <td>5</td>
            <td>34</td>
        </tr>
        [snip 100 lines]
        <tr>
            <td>4</td>
            <td>0</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Answer 1

您可以使用类似的东西:

tr {
    border: 1px dashed #f0f;
    float: left
}

这将适用于 IE8+ 和所有现代浏览器。它在 IE7 中失败。

参见: http://jsfiddle.net/XeLUV/
或者使用 width:http://jsfiddle.net/XeLUV/1/