设置 HTML 表格边框以组合表格看起来像一个表格（JQuery）

Question

这个长问题可以组合成一个简单的句子：如何在不影响其 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。

Answer 1

尝试无边框的中间表，而不是 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>

Answer 2

您可以使用border-collapse 合并边框，然后使用:not 选择器，选择除最后一个DIV 中的表之外的所有表，以删除它们的底部边框（在css 中，而不是js 中）：

table {
  border-collapse: collapse;
}

div:not(:last-child) table {
  border-bottom: 0;
}

示例：https://codepen.io/anon/pen/EqNMNm