Question

我有一个非常简单的表格：

<table>
    <tr>
        <td>col1</td><td>col2</td><td>col3</td>
    </tr>
    <tr>
        <td colspan=2>Mybigcell</td><td>col3</td>
    </tr>
</table>

我想要实现的是在第一列周围绘制边框，这意味着围绕col1和Mybigcell的左边部分。因此，边界必须穿过Mybigcell的中间。

有可能吗？

Answer 1

您可以使用绝对定位的伪元素来实现此目的。

只需使用下面的CSS并将class="border"添加到某个单元格即可。它的列将获得边界。

基本上，它的工作原理如下：

我们将使用top: 0和bottom: 0插入一些绝对定位的伪元素。它们的包含块将是表格矩形（position: relative），因此伪元素将增长到覆盖所有列。
这些伪元素将插入单元格的开头（::before）。假设在单元格内部左对齐，它们将在所需位置对齐。
请注意，无法使用left: 0对齐它们（我们也不能将::after与right: 0一起使用）因为包含的块是表，而不是单元格。如果包含块是单元格，那么这将更可靠，但边框不会填满所有列。
因此，如果单元格具有border类，则会在该单元格（左边框）和后一条（右边框）中插入伪元素。
但是如果具有border类的单元格是行中的最后一个单元格，则它将没有右边框，因为没有后续单元格。
要解决此问题，我使用:last-child伪类来检测此情况，然后使用::after插入left: 100%伪元素。如上所述，它将相对于表而不是单元格对齐。但假设行中没有丢失的单元格，那将无关紧要，因为单元格的右边缘和表格的右边缘将重合。
最后，我使用负边距进行一些小调整，使像素更完美。

table {
  position: relative;    /* Containing block for the borders */
  border-collapse: collapse;
}
td {
  padding: 1px;
  padding-left: 2px;     /* Increase by borderWidth */
}
.border:before, .border + :before, .border:last-child:after {
  content: '';           /* Enable the pseudo-element */
  position: absolute;    /* Take it out of flow */
  top: 0;                /* From the top of the table... */
  bottom: 0;             /* ...to the bottom of the table */
  border-left: 1px solid;/* This produces the border */
  margin-left: -2px;     /* Same as td's paddingLeft, in negative */
}
.border:last-child:after {
  left: 100%;            /* Place it at the right */
  margin-left: 0;        /* Remove the margin set previously */
}

<table>  <tr>  <td class="border">col1</td>        <td>col2</td>                 <td>col3</td>                                </tr>
         <tr>  <td colspan=3>Mybigbigcell</td>                                                                                </tr>  </table><hr />
<table>  <tr>  <td>col1</td>                       <td class="border">col2</td>  <td>col3</td>                                </tr>
         <tr>  <td colspan=3>Mybigbigcell</td>                                                                                </tr>  </table><hr />
<table>  <tr>  <td>col1</td>                       <td>col2</td>                 <td class="border">col3</td>                 </tr>
         <tr>  <td colspan=3>Mybigbigcell</td>                                                                                </tr>  </table><hr />
<table>  <tr>  <td>col1</td>                       <td>col2</td>                 <td class="border">col3</td>  <td>col4</td>  </tr>
         <tr>  <td colspan=4>Mybigbigbigcell</td>                                                                             </tr>  </table>

如果要自定义边框或填充的宽度，请参阅SCSS：

/* Parameters */
$borderWidth: 1px;
$padding: 1px;

/* Code */
$sum: $borderWidth + $padding;
table {
  position: relative;
  border-collapse: collapse;
}
td {
  padding: $padding;
  padding-left: $sum;
}
.border:before, .border + :before, .border:last-child:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: $borderWidth solid;
  margin-left: - $sum;
}
.border:last-child:after {
  left: 100%;
  margin-left: 0;
}

html / css：通过表格单元格绘制边框

1 个答案: