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

使用表格无法完成此操作。您需要将表拆分为三个单独的表，然后从那里重新格式化页面。

CSS确实提供了columns功能，它允许块元素中的内容显示在列中（例如报纸列），但这不适用于表格内容，并且无论如何它也有有限的浏览器支持（IE9不支持;其他地方的供应商前缀），所以可能不建议主流使用。

但如果你想了解更多相关信息，Quirksmode就如何使用此功能做了很好的准备：http://www.quirksmode.org/css/multicolumn.html

您可以在CanIUse上看到当前的浏览器支持情况：http://caniuse.com/#search=columns

Answer 2

你可以使用类似的东西：

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

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

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

如何对角或垂直打破CSS表？

2 个答案: