Question

我正在寻找一种方法来打破＆＃34;打破＆＃34;仅使用CSS的表格行。

我想改变这个：
one line

对此：
broken line

我无法访问HTML，但可以控制CSS。

我试过了

td:nth-child(3) {
    display: block;
}

但它似乎不起作用。

以下是一些简化的测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
td:nth-child(3) {
    display: block;
    background-color: yellow;
}
</style>
</head>

<body>
<table border="1">
    <tr>
        <td>111111</td>
        <td>222222</td>
        <td>333333</td>
        <td>444444</td>
    </tr>
</table>
</body>
</html>

Answer 1

如何将inline-block与固定width表格一起使用...或% 45% width td个width元素因此，您无需为table

定义td

Demo

在这里，我只是将display: inline-block;转换为width，由于固定的word-wrap: break-word;表，它们将被强制换行到下一行。

同样使用table { width: 120px; } table tr td { width: 50px; word-wrap: break-word; } table tr td { display: inline-block; margin-top: 2px; }属性，以便强制非间隔字符串中断。

您也可以使用基于width的{{1}}，这样您就无需关心单元格宽度....

如果vertical-align: top;

中的单元格为空，则您可能需要min-height和table

table tr td {
    display: inline-block;
    margin-top: 2px;
    vertical-align: top;
    min-height: 20px;
}

Demo （仅在单元格为空时才需要）

请注意，inline-block会导致4px偏移问题，在这种情况下只需将font-size: 0;分配给table并重新设置font-size返回您的td元素，这样您将获得单元格边距的一致性。

警告：我永远不会建议做这类事情，所以将此作为您的最后一个优先事项如果你有JavaScript控件，那么考虑在tr
附近添加td

从这里开始请忽略如果你不能使用jQuery，假设你有一个使用jQuery库，你可以简单地将片段添加到该JS文件....

（我在这里添加class来唯一标识元素，class也可以使用.addClass()添加，通过定义一些最近的CSS选择器）所以没有这里修改HTML的问题。

$('table.wrap_trs tr').unwrap(); //Remove default pre-generated tr
var cells = $('table.wrap_trs tr td');
for (var i = 0; i < cells.length; i += 2) {
    cells.slice(i, i + 2).wrapAll('<tr></tr>'); //Wrapping the tds with tr
}

Demo

Answer 2

您可以使用float属性并使用TD的宽度进行播放，因为您需要调整表格的边框宽度

table{
        width:100%;
    }

td:nth-child(3) {
    display: block;
    background-color: yellow;
}


tr td {
    float: left;
    width: 49.5%;
}

希望这有帮助！但需要检查浏览器兼容性

Answer 3

适当的CSS方法，简单易用

这可能对你有所帮助，但它可能会产生可变长度的问题，因此我使用了min-width

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style>

    td:nth-child(3) {
        display: block;
        background-color: yellow;
        clear:left;
    }
    tr{
    float:left;
    }
    td{
    float:left;
    min-width:100px; //used min-width for proper alignment
    }
    </style>
    </head>

    <body>
    <table border="1">
        <tr>
            <td>111111</td>
            <td>222222</td>
            <td>333333</td>
            <td>444444</td>
        </tr>
    </table>
    </body>
    </html>

打破只使用CSS

3 个答案: