使用 CSS 去除表格中的水平边框答案

【问题标题】：Get rid of horizontal border in a table using CSS使用 CSS 去除表格中的水平边框
【发布时间】：2018-02-27 15:33:36
【问题描述】：

我想去掉中间的水平线。基本上，我希望表格有外边框和中间的垂直分隔线。我如何做到这一点？

JS 小提琴 - https://jsfiddle.net/kac69ovn/

table {
  width: 85%;
  border-collapse: collapse;
  margin-left: 4%;
  border: 1px solid black;
}

th {
  text-align: left;
  width: 50%;
  border: 1px solid black;
  padding: 5px 11px;
}

td {
  text-align: left;
  width: 50%;
  border: 1px solid black;
  padding: 5px 11px;
}

<table>
  <tbody>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
    <tr>
      <td>Lorem Ipsum is simply dummy text of the printing and </td>
      <td>It is a long established fact that a </td>
    </tr>
  </tbody>
</table>

提前致谢！

【问题讨论】：

标签： html css css-tables

【解决方案1】：

保留表格的完整边框，但对于 th 和 td 元素，请坚持使用 border-left 和 border-right。

table {
    width: 85%;
    border-collapse: collapse;
    margin-left: 4%;
    border: 1px solid black;
}
th, td {
    text-align: left;
    width: 50%;
    border-right: 1px solid black;
    border-left: 1px solid black;
    padding: 5px 11px;
}

<table>
       <tbody>
          <tr>
             <th>Firstname</th>
             <th>Lastname</th>
          </tr>
          <tr>
             <td>Lorem Ipsum is simply dummy text of the printing and </td>
             <td>It is a long established fact that a </td>
          </tr>
       </tbody>
    </table>

【讨论】：

【解决方案2】：

你可以摆弄边框：

为tds 设置border-top: none
为th设置border-bottom: none
当有多个trs 时，添加这个以防止出现水平线：
```
tr:not(:last-child) td {
 border-bottom: none;
}
```

请看下面的演示：

table {
  width: 85%;
  border-collapse: collapse;
  margin-left: 4%;
  /*border: 1px solid black;*/
}

th {
  text-align: left;
  width: 50%;
  border: 1px solid black;
  border-bottom: none; /* ADDED */
  padding: 5px 11px;
}

td {
  text-align: left;
  width: 50%;
  border: 1px solid black;
  border-top: none; /* ADDED */
  padding: 5px 11px;
}

tr:not(:last-child) td { /* ADDED */
  border-bottom: none;
}

<table>
  <tbody>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
    <tr>
      <td>Lorem Ipsum is simply dummy text of the printing and </td>
      <td>It is a long established fact that a </td>
    </tr>
    <tr>
      <td>Lorem Ipsum is simply dummy text of the printing and </td>
      <td>It is a long established fact that a </td>
    </tr>
  </tbody>
</table>

【讨论】：

【解决方案3】：

 th, td {border: none; border-right: 1px solid black;}

【讨论】：

【解决方案4】：

我想这就是你要找的东西：

table {
    width: 85%;
    border-collapse: collapse;
    margin-left: 4%;
    border: 1px solid black;
}
th {
    text-align: left;
    width: 50%;
    border: 1px solid black;
    padding: 5px 11px;
    border-bottom: None;
}
td {
    text-align: left;
    width: 50%;
    border: 1px solid black;
    padding: 5px 11px;
    border-top: None;
}

【讨论】：

【解决方案5】：

更新

https://jsfiddle.net/kac69ovn/1/

table {
    width: 85%;
    border-collapse: collapse;
    margin-left: 4%;
    border: 1px solid black;
}
th {
    text-align: left;
    width: 50%;
    border-right: 1px solid black;
    padding: 5px 11px;
}
td {
    text-align: left;
    width: 50%;
    border-right: 1px solid black;
    padding: 5px 11px;
}

【讨论】：