如何使用边框分隔表中的行

Question

我有一张桌子，我必须使用边框分隔一行，如下图所示。

正如您所看到的，边框分隔符的左侧空间没有完全触及桌面边框。

我尝试过填充，保证金，但没有任何效果。

tr {
    border-bottom: 1px solid blue;
    padding: 10px; // not working
    margin: 10px; // not working
}

https://jsfiddle.net/alpeshprajapati/s934Lpbx/

实现这一目标的方法是什么？

Answer 1

CSS

table {
  border: 1px solid black;
  border-collapse: collapse;
}
thead {
    background: black;
    color: white;
}
th {
    width: 100px;
}
tr {
    float: left;
    border-bottom: 1px solid blue;
    width: 90%;
    margin: 0 10px;
}
td{
  width: 32%;
  float: left;
}

Answer 2

试试这个：

＆＃13;

＆＃13;

table {
  border: 1px solid black;
  border-collapse: collapse;
}
thead {
    background: black;
    color: white;
}
th {
    width: 100px;
}
tr {
 // border-bottom: 1px solid blue;
}
td{
  padding:5px 10px;
}
.border{
  background:skyblue; 
  width:100%; 
  height:2px;
}

＆＃13;

<table>
  <thead>
    <th>Th1</th>
    <th>Th2</th>
    <th>Th3</th>
  </thead>
  <tbody>
    <tr>
      <td>TD1</td>
      <td>TD2</td>
      <td>TD3</td>
    </tr>
    <tr>
      <td colspan="3">
        <div class="border"></div>
      </td>
    </tr>
    <tr>
      <td>TD1</td>
      <td>TD2</td>
      <td>TD3</td>
    </tr>
    <tr>
      <td colspan="3">
        <div class="border"></div>
      </td>
    </tr>
    <tr>
      <td>TD1</td>
      <td>TD2</td>
      <td>TD3</td>
    </tr>    
    
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

要增加边框的长度，必须增加包含它的div的宽度。