使用 CSS 去除 table 中的水平边框

Question

我想去掉中间的横线。基本上，我希望 table 有外边框和中间的垂直分隔线。我该如何实现？

JS Fiddle - 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>

提前致谢！

Answer 1

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

Answer 2

我想这就是你要找的：

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;
}

Answer 3

已更新

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;
}

Answer 4

保持 table 的完整边框，但 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>

Answer 5

您可以 fiddle 使用边框：

设置 border-top: none 为 tds
设置 border-bottom: none 为 th

当有多个tr时添加这个以防止水平线：

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>

使用 CSS 去除 table 中的水平边框

Get rid of horizontal border in a table using CSS

html

css

css-tables