使用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元素。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

Answer 3

我认为这就是你要找的东西：

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 4

更新

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 5

你可以摆弄边界：

1. 为border-top: none s

设置td

2. 为border-bottom: none

设置th

3. 当有多个tr s：

   时，添加此项以防止水平线

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

见下面的演示：

＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;