这个长问题可以组合成一个简单的句子:如何在不影响tr或td元素的情况下有选择地(底部或顶部)设置表的边框?我想这和改变任何元素的边界都一样简单。我错了。
剩下的问题解释了我在哪里需要这个,以及我到目前为止所做的努力。
以下是HTML标记的简化描述:
有三个div和三张桌子。我想让它们看起来像一张桌子。这三个div是必需的,原因与此无关。
如果我使用以下选项:
$('#tbl1').css('border-bottom', 'none');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<table id="tbl1" border="1" style="width:400px;" >
<thead>
<tr>
<td>Head Row 1, cell 1</td>
<td>Head Row 1, cell 2</td>
<td>Head Row 1, cell 3</td>
</tr>
<tr>
<td>Head Row 2, cell 1</td>
<td>Head Row 2, cell 2</td>
<td>Head Row 2, cell 3</td>
</tr>
</thead>
</table>
</div>
<div id="div2" >
<table id="tbl2" style="width:400px;" border="1">
<tbody>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
</tbody>
</table>
</div>
<div id="div3" >
<table id="tbl3" border="1" style="width:400px;">
<tfoot>
<tr>
<td>Foot Row 1, cell 1</td>
<td>Foot Row 1, cell 2</td>
<td>Foot Row 1, cell 3</td>
</tr>
<tr>
<td>Foot Row 2, cell 1</td>
<td>Foot Row 2, cell 2</td>
<td>Foot Row 2, cell 3</td>
</tr>
</tfoot>
</table>
</div>
它接受第一个表中所有单元格的下边框,而不仅仅是表的下边框。如果我使用:
$('#tbl1' + ' tr:last-child').css('border-bottom', 'none')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
<table id="tbl1" border="1" style="width:400px;" >
<thead>
<tr>
<td>Head Row 1, cell 1</td>
<td>Head Row 1, cell 2</td>
<td>Head Row 1, cell 3</td>
</tr>
<tr>
<td>Head Row 2, cell 1</td>
<td>Head Row 2, cell 2</td>
<td>Head Row 2, cell 3</td>
</tr>
</thead>
</table>
</div>
<div id="div2" >
<table id="tbl2" style="width:400px;" border="1">
<tbody>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
</tbody>
</table>
</div>
<div id="div3" >
<table id="tbl3" border="1" style="width:400px;">
<tfoot>
<tr>
<td>Foot Row 1, cell 1</td>
<td>Foot Row 1, cell 2</td>
<td>Foot Row 1, cell 3</td>
</tr>
<tr>
<td>Foot Row 2, cell 1</td>
<td>Foot Row 2, cell 2</td>
<td>Foot Row 2, cell 3</td>
</tr>
</tfoot>
</table>
</div>
它接受第一个表的最后一行的下边框,但保留表本身的下边框。
当然,为了处理最低两个表的情况,上面的问题会重复出现。
我的目标是删除连接表的所有边框痕迹,以便我可以将一种粗边框或任何其他类型的边框指定给一个表作为表分隔符。因此,进一步澄清:
必须删除第一个表的下边框和第二个表的上边框以及相应行的tr和tds的相应边框。
必须删除第三个表的上边框和第二个表的下边框以及相应行的tr和tds的相应边框。
在这之后,我可以设置任何边界,我想作为一个表分隔符。
中间的表格将是可滚动的,所以我将在顶部表格上放置一个新的底部边框,在底部边框上放置一个新的顶部边框。
解决方案必须尽可能通用,以适应任何可能的表布局,但有一个限制,即行是tr,每个表至少有一个tr。
最佳答案
尝试取消对中间表的排序,而不是tr或td。
同时将负边距添加到中间div
table#tbl1 {
border-bottom:none;
}
table#tbl2 {
border-top:none;
border-bottom:none;
}
table#tbl3 {
border-top:none;
}
#div2 {
margin:-2px 0;
}
<div id="div1">
<table id="tbl1" border="1" style="width:400px;">
<thead>
<tr>
<td>Head Row 1, cell 1</td>
<td>Head Row 1, cell 2</td>
<td>Head Row 1, cell 3</td>
</tr>
<tr>
<td>Head Row 2, cell 1</td>
<td>Head Row 2, cell 2</td>
<td>Head Row 2, cell 3</td>
</tr>
</thead>
</table>
</div>
<div id="div2">
<table id="tbl2" style="width:400px;" border="1">
<tbody>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
</tbody>
</table>
</div>
<div id="div3">
<table id="tbl3" border="1" style="width:400px;">
<tfoot>
<tr>
<td>Foot Row 1, cell 1</td>
<td>Foot Row 1, cell 2</td>
<td>Foot Row 1, cell 3</td>
</tr>
<tr>
<td>Foot Row 2, cell 1</td>
<td>Foot Row 2, cell 2</td>
<td>Foot Row 2, cell 3</td>
</tr>
</tfoot>
</table>
</div>
关于jquery - 设置HTML表格边框以合并表格,使其看起来像一个表格(JQuery),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57238602/