html/css: Draw borders through a table cell - html

Question

I have a very simple table:
<table>
<tr>
<td>col1</td><td>col2</td><td>col3</td>
</tr>
<tr>
<td colspan=2>Mybigcell</td><td>col3</td>
</tr>
</table>
What I want to achieve is to draw a border around the first column, that means around col1 and the left part of Mybigcell. The border thus has to run through the middle of Mybigcell.
Is it possible?

Answer 1

You can use absolute positioned pseudo-elements to achieve this.
Just use the CSS below and add class="border" to some cell. Its column will obtain a border.
Basically, it works like this:
We will insert some absolute positioned pseudo-elements with top: 0 and bottom: 0. Their containing block will be the table rectangle (position: relative), so the pseudo-elements will grow to cover all the column.
These pseudo-elements will be inserted at the beginning of the cells (::before). Assuming left aligning inside the cells, they will be aligned at the desired position.
Note they can't be aligned using left: 0 (and we can't use ::after with right: 0 neither) because the containing block is the table, not the cell. If the containing block was the cell this would be more reliable, but the borders wouldn't fill all the column.
Therefore, if a cell has a border class, a pseudo-element will be inserted in that cell (the left border), and in the following one (the right border).
But if the cell with the border class was the last one in the row, it would have no right border, because there is no following cell.
To fix that, I use the :last-child pseudo-class to detect this case, and then I insert an ::after pseudo-element with left: 100%. As mentioned above, it will be aligned relatively to the table instead of the cell. But assuming there is no missing cell in the row, that won't matter because the right edge of the cell and the right edge of the table will coincide.
Finally, I do some small adjustments using negative margins, to make it pixel perfect.
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>
If you want to customize the width of the borders or the paddings, see the 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;
}