[分享]css不显示table竖分割

在前端开发中，经常会用到表格来展示数据。而CSS中的border属性可以用来给表格的单元格添加边框，从而实现表格的分割线效果。但是，有时候我们会发现，在使用CSS来设置表格的分割线时，垂直线并没有显示...

在前端开发中，经常会用到表格来展示数据。而CSS中的border属性可以用来给表格的单元格添加边框，从而实现表格的分割线效果。但是，有时候我们会发现，在使用CSS来设置表格的分割线时，垂直线并没有显示出来。
经过调试发现，这是因为在默认情况下，table元素的border-collapse属性被设置为collapse，这会导致相邻的单元格边框合并为一条线，从而使得垂直线不显示。
为了解决这个问题，我们需要在CSS中设置table元素的border-collapse属性为separate，这样相邻的单元格边框就不会合并了，垂直线就能显示出来了。
下面是一个示例代码：

<style>
  table {
    border-collapse: separate;
    border-spacing: 0;
  }
  td {
    border: 1px solid black;
  }
</style>
<br>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table> 

在上面的代码中，我们通过设置table元素的border-collapse属性为separate来避免了相邻单元格边框合并的问题，从而使得垂直线正常显示出来。
同时，我们还设置了td元素的border属性，来给表格单元格添加边框。这里的border-spacing属性用来调整单元格之间的间距，可以根据实际情况进行调整。
总之，如果您在使用CSS设置表格的分割线时，出现了垂直线不显示的问题，可以尝试将table元素的border-collapse属性设置为separate，看看能否解决问题。