如何在表格单元格之间建立垂直线？

Question

在下面的代码中，我希望在单元格之间有垂直线，这样做的最佳方法是什么？我尝试过的东西是给桌子提供背景颜色，但是它给表格单元格的边框一样，然后尝试边框左边框或右边边框但是它会在单元格外面给出一条额外的线条。在这里，我想要细胞之间的垂直线。请帮忙。

table tr td {
  background-color: #dedede;
  color: black
}

<table>
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

Answer 1

喜欢这个？除了行中的最后一个<{1}}之外，这会为每个table tr td添加边框

table tr td {
  border-right: 1px solid blue;
  color: black
}

table tr td:last-of-type {
  border: none;
}

<table>
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

如Daniel A. White所述 - last-child也有效：

table tr td:last-child {
  border: none;
}

Answer 2

您可以将CSS边框应用于td并添加cellspacing="0" cellpadding="0"以消除td

之间的差距

HTML：

<table cellspacing="0" cellpadding="0">
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

CSS：

table{
  padding: 0;
  background-color: #dedede;
  color: black;
}
table tr td{
  padding: 5px;
  border-right: 1px solid red;
}
table tr td:last-child{
  border-right: none;
}

小提琴：https://jsfiddle.net/debraj/1ehubox9/

Answer 3

table tr td {
   border-right: 1px solid black;
}
table tr td:nth-child(3n){
    border-right: none;
}

Answer 4

在单元格右侧添加边框并在表格左侧添加边框应该这样做：

＆＃13;

＆＃13;

table tr td {
  border-right: 1px solid #dedede;
  color: black
}

table {
  border-left: 1px solid #dedede;
}

＆＃13;

<table>
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 5

table tr td+td {
  border-left: 1px solid blue;
  color: black
}

<table>
  <tr>
    <td>this is first cell</td>
    <td>this is second cell</td>
    <td>this is third cell</td>
  </tr>
  <tr>
    <td>this is fouth cell</td>
    <td>this is fifth cell</td>
    <td>this is sixth cell</td>
  </tr>
</table>