仅使用CSS打破<tr>
Yon*_*nat 32 html css html-table
我正在寻找一种只使用CSS"打破"表行的方法.
我想改变这个:
对此:
我无权访问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>
Mr.*_*ien 29
如何使用inline-block一个固定的width表...或者用%大致45%的width为你的td元素,所以你不会需要定义width为table
在这里,我只是转动td来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为好,这样你就不需要关心单元格宽度....
您可能需要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
}
- 感谢jQuery解决方案,对于可以使用它的用户:) (2认同)
您可以使用float属性并使用TD的宽度进行播放,因为您需要调整表格的边框宽度
table{
width:100%;
}
td:nth-child(3) {
display: block;
background-color: yellow;
}
tr td {
float: left;
width: 49.5%;
}
希望这可以帮助!但需要检查浏览器兼容性
适当的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>
| 归档时间： |
|
| 查看次数： |
10055 次 |
| 最近记录： |