Html 如何使用CSS沿对角线或垂直打断表格？

如果您有一个非常高或非常宽的

，并且希望将其包装以显示在屏幕上。如何使用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>

福
酒吧
巴兹
6.
1.
5.
42
5.
34
[剪下100行]
4.
0
3.

这不能使用表来完成。您需要将该表拆分为三个单独的表，然后从那里重新格式化页面

CSS确实提供了一个

columns

功能，允许块元素中的内容显示在列中（如报纸列），但这不适用于表格内容，而且在任何情况下，它也有有限的浏览器支持（IE9不支持；其他地方的供应商前缀），因此可能还不建议主流使用

但如果您确实想了解更多信息，Quirksmode对如何使用此功能有很好的介绍：

---

您可以在CanIUse上看到当前的浏览器支持情况：

您可以使用类似于：

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

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

请参见：

---

或者使用

宽度

：

@Annan:如果您定义了的高度，您将拥有一个带有和固定的可滚动表格，但行将是可滚动的。

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