表行说明
问题描述:
table td {
border: 1px solid black;
}
<table>
<thead>
<th>
col1
</th>
<th>
col2
</th>
</thead>
<tbody>
<tr>
<td>field1</td>
<td>field2</td>
</tr>
<tr>
<td colspan="2">The above row is number 1</td>
</tr>
<tr>
<td>field3</td>
<td>field4</td>
</tr>
<tr>
<td colspan="2">The above row is number 2</td>
</tr>
</tbody>
</table>
我想要什么? 那么我有这个HTML代码。 我想放行描述,但没有使用无用的TR标签。
原因: 我在列的基础上排序。 列值是整数,当我排序时,所有行描述都在底部,而字段行在顶部排序。但行描述应附加到父行。
问题: 如何附加它,以便在基于列对表进行排序后,行描述不会被破坏?
答
这并不是一个惊人的解决方案,但你可以这样试试:
<table>
<thead>
<th>
col1
</th>
<th>
col2
</th>
</thead>
<tbody>
<tr>
<td>
field1
</td>
<td>field2</td>
<td>
<div>
description
</div>
</td>
</tr>
<tr>
<td>field3</td>
<td>field4</td>
<td>
<div>
description
</div>
</td>
</tr>
</tbody>
</table>
CSS:
table,
thead,
tbody,
tr {
display: block;
clear: both;
}
table {
width: 130px;
}
thead {
height: 30px;
}
th,
td {
width: 60px;
float: left;
height: 30px;
border: 1px solid black;
}
td {
margin-top: 30px;
}
tr {
height: 60px;
position: relative;
}
tr td:last-child {
width: 0;
overflow: hidden;
border: none;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
}
+0
一种操纵CSS的黑客,但这似乎是现在最好的解决方案 – user1735921
请删除 “我想” ......我们帮助,而不是写你的代码。 (见[问]) – evolutionxbox
你用什么来排序,否则我只是写你的代码? – krisph
您将不得不按两行的组排序以维护标题行,继续尝试此操作,然后让我们知道您如何上传和发布您的JS。 – G0dsquad