alexanderlukanin13 alexanderlukanin13 - 1 month ago 10
HTML Question

Borderless header for a table

What I want to achieve is:

borderless header

The leftmost header column has no border, but it is a part of the table.

I tried the following HTML:

<table class="my-table" style="border-left: 0">
<tr>
<td style="border-left: 0;border-top: 0; border-bottom: 0">x</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td style="border-left: 0;border-top: 0; border-bottom: 0">f(x)</td>
<td>1</td>
<td>4</td>
<td>9</td>
</tr>
</table>


with following CSS:

table.my-table {
border-collapse: collapse;
border: 1px solid grey;
}
table.my-table td {
border: 1px solid grey;
padding: 0 0.5em;
text-align: center;
}


https://jsfiddle.net/96vk704s/

But upper and lower borders for column 1 are still there.

not quite borderless

I know I can make a workaround using two tables with absolute sizes, but maybe there is nice way to do it in one table?

Answer

Remove the border on the table and it works

Fiddle here

table.my-table {
    border-collapse: collapse;
}