如何移除表格选中行/单元格的边框间距？

问题 #

能否移除选中行/单元格之间的边框间距？我希望消除“content”单元格之间的间距，使其显示为一行。我尝试为选中行添加border-spacing属性，但似乎不起作用。

原代码 #

<html>
<head>
   
    <style>
    
        .flex_container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .inner {
            height:1000px;
            width: 900px;

            background-color:#000;
            
            background-size: cover;
            color: white;
            display: flex;
           /* justify-content: center;
            align-items: center;
            */
        }
        
        .table-border {
  border-collapse: separate;
  border-spacing: 6px 5px;
  table-layout: fixed;

  color: white;
  font-size: 15px;
  display: inline-block;

}

.table-border tr th {
  background-color: rgb(255,255,255,0.6);
  border-radius: 2px;
  padding-right: 35px;
  padding-left: 35px;
  padding-top: 10px;
padding-bottom: 10px;
}
.content-inner {
margin-top: 250px;
margin-left: 50px;
}
      
     
    </style>
</head>
<body>
  <div class="flex_container">
     <div class="inner">
        <div class="content-inner">
       <table class="table-border">
            <tbody>
            <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            </tr>
            <tr style="background:rgba(255, 255, 255, 0.3)">
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            </tr>
            </tbody>
            </table>
            
        </div>
     </div>
  </div>
</body>
</html>

解决方案 #

border-spacing是作用在整个表格上的属性，没法单独给某一行设置。要让content行的单元格连成无间距的一行，同时保留表头的间距，可以这么修改：

1. 把表格的border-spacing设为0，取消全局的单元格间距
2. 给表头的<th>添加右侧外边距来模拟原来的列间距，最后一个th不需要加
3. 给content行的td添加内边距，保持和表头一致的文字位置，背景样式不变即可让单元格连成整体

修改后的代码 #

<html>
<head>
   
    <style>
    
        .flex_container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .inner {
            height:1000px;
            width: 900px;
            background-color:#000;
            background-size: cover;
            color: white;
            display: flex;
        }
        
        .table-border {
            border-collapse: separate;
            border-spacing: 0; /* 取消全局单元格间距 */
            table-layout: fixed;
            color: white;
            font-size: 15px;
            display: inline-block;
        }

        .table-border tr th {
            background-color: rgb(255,255,255,0.6);
            border-radius: 2px;
            padding-right: 35px;
            padding-left: 35px;
            padding-top: 10px;
            padding-bottom: 10px;
            margin-right: 6px; /* 模拟原有的列间距 */
        }
        /* 最后一个th取消右侧外边距 */
        .table-border tr th:last-child {
            margin-right: 0;
        }
        /* 给content行的td添加内边距，保持和表头一致的文字位置 */
        .table-border tr.content-row td {
            padding-right: 35px;
            padding-left: 35px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .content-inner {
            margin-top: 250px;
            margin-left: 50px;
        }
      
     
    </style>
</head>
<body>
  <div class="flex_container">
     <div class="inner">
        <div class="content-inner">
       <table class="table-border">
            <tbody>
            <tr>
            <th>heading 1</th>
            <th>heading 2</th>
            <th>heading 3</th>
            <th>heading 4</th>
            </tr>
            <!-- 给content行添加类名方便样式控制 -->
            <tr class="content-row" style="background:rgba(255, 255, 255, 0.3)">
            <td>content</td>
            <td>content</td>
            <td>content</td>
            <td>content</td>
            </tr>
            </tbody>
            </table>
            
        </div>
     </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者LiveEn