使用CSS摆脱桌子中的水平边框

Question

我想摆脱中间的水平线。基本上，我希望桌子在中间有外部边界和垂直分隔线。我该如何实现？

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>

预先感谢！

Answer 1

保留桌子上的完整边框，但请遵守border-left和border-right的th和td元素。

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 2

您可以摆弄边界：

1. 为td S

设置border-top: none

2. 为th

设置border-bottom: none

3. 在有多个tr s时添加以防止水平线：

   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>

Answer 3

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

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

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