css技巧，元素后面的行

Question

元素后面的行

我有一个tr有3列，我想在列值后面加一行，如：

--column1----------column2--------------------column3------

如果我想在第1列上有一条垂直线，我该怎么做呢？

   .
column1             column2               column3
   .
   .
   .
column1             column2               column3
   .
   .
   .
column1             column2               column3
   .
   .
   .
column1             column2               column3
   .
   .
   .
column1             column2               column3
   .

Answer 1

希望它对你有所帮助。

body{
  background:white;
}
table{
  position:absolute;
  z-index:2;
}
tr td{padding:5px;}

td{
  background:white;
}

#line{
  position:absolute;
  top:38px;
  left:56px;
  width:1px;
  height:124px;
  border-left:1px dashed black;
  z-index:1;
}

<div id="line">

</div>
<table cellspacing="15">
<tr>
 <td>column1</td> 
 <td> column2</td> 
 <td>column3</td> 
</tr>
<tr>
 <td>column1</td> 
 <td> column2</td> 
 <td>column3</td> 
</tr>
<tr>
 <td>column1</td> 
 <td> column2</td> 
 <td>column3</td> 
</tr>
<tr>
 <td>column1</td> 
 <td> column2</td> 
 <td>column3</td> 
</tr>

</table>