Html 打破a<；tr>；仅使用CSS_Html_Css_Html Table

Html 打破a<；tr>；仅使用CSS

html css

Html 打破a<；tr>；仅使用CSS,html,css,html-table,Html,Css,Html Table,我正在寻找一种只使用CSS“打断”表行的方法我想更改此设置：对此：我没有访问HTML的权限，但可以控制CSS 我试过了 td:nth-child(3) { display: block; } 但它似乎不起作用下面是一些用于测试的简化代码：运输署：第n名儿童（3）{ 显示：块；背景颜色：黄色； } 111111 222222 333333 444444 您可以使用float属性，并在需要调整表格边框宽度时使用TD的宽度 table{ width:100%

我正在寻找一种只使用CSS“打断”表行的方法

我想更改此设置：

对此：

我没有访问HTML的权限，但可以控制CSS

我试过了

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

但它似乎不起作用

下面是一些用于测试的简化代码：


运输署：第n名儿童（3）{
显示：块；
背景颜色：黄色；
}
111111
222222
333333
444444

您可以使用float属性，并在需要调整表格边框宽度时使用TD的宽度

table{
        width:100%;
    }

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


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

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

如何使用带有固定宽度的

表格的内联块
。。。或者对td
元素使用%
大约45%
的width
，这样您就不需要为表定义width

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


在这里，我只是把td
转到display:inline块宽度
表格，它们将被迫换行到下一行
我也在使用单词包装：打断单词属性，以便强制断开非间隔字符串
table {
    width: 120px;
}

table tr td {
    width: 50px;
    word-wrap: break-word;
}

table tr td {
    display: inline-block;
    margin-top: 2px;
}

您也可以使用基于%
的宽度，这样您就不需要关心单元格宽度了
您可能需要垂直对齐：顶部表格中的单元格为空，则code>与最小高度一起

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

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

只需注意，inline block
将导致4px
偏移量出现一些问题，在这种情况下，只需分配字体大小：0
到表
并为td
元素重新设置字体大小
，这样您将获得单元格边距的一致性
警告：我永远不会建议做这样的事情，所以
将此作为您的最后优先事项。如果您有JavaScript控件，那么
考虑在<代码> TD/<代码> 中附加<代码> TR < /代码>

从这里开始请忽略如果您不能使用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
}

$（'table.wrap_trs tr'）.unwrap（）//删除默认预生成的tr
变量单元格=$（'table.wrap_trs tr td'）；
对于（变量i=0；i

合适的CSS方法，简单易用
这可能会对您有所帮助，但它可能会给可变长度带来问题，因此我使用了最小宽度
    <!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>


运输署：第n名儿童（3）{
显示：块；
背景颜色：黄色；
清除：左；
}
tr{
浮动：左；
}
运输署{
浮动：左；
最小宽度：100px；//用于正确对齐的最小宽度
}
111111
222222
333333
444444
您可以给tr
awidth
和所有td
一半宽度的tr
和float:left。类似这样：这是出于响应目的（通过媒体查询或其他方式控制外观）吗？要将标记包含在问题中，这是一个非常有用的方法。如果不丢失其他属性表，这是不可能的，这些属性表提供给您，即它们独特的大小调整特性。在这种情况下，我不会使用表，而是使用flexbox或css网格。感谢jQuery解决方案，对于可以使用它的用户：）“大约45%”如果使用框大小：边框框
（以及相应的-moz框大小：边框框
）并使用宽度：50%
，则可以做得更好。。。除非你有利润，否则你需要手动减去。非常感谢！我设法做到了这一点，只有宽度和显示：内联块属性，其他似乎没有必要。谢谢。这是可行的，但似乎比最上面的答案更难适应我的需要。我同意这是因为1）cellpadding和cellmargin需要为0，但您无法访问表格html标记2）如果文本大小增加得很好，在px中放置固定宽度可能会在将来破坏您的布局！“最小宽度”和“清除：左侧”似乎可以防止元素四处飞行。谢谢你。