HTML table column styling using CSS - html

Question

I have the following HTML table and I need a different styling in the last column:
https://jsfiddle.net/dqa9y1g3/
table {
border-collapse: collapse;
border-right: 0px;
border: 1px solid;
}
td {
border: 1px solid;
}
thead {
border: 2px;
}
th.th {
border: solid;
}
th.th3 {
border-top: 1px dashed;
font-weight: normal;
}
<table>
<thead>
<tr>
<th class="th">h1</th>
<th class="th">h2</th>
<th class="th3">h3</th>
</tr>
</thead>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
<td>r2c3</td>
</tr>
</table>
What is the right way to do it?
This is what I want to get:

Answer 1

If you specifically need to target the last column, you can use this.
You also need to remove the table border, because it will be drawn over the individual th or td border.
table {
border-collapse: collapse;
}
td {
border: 1px solid;
}
thead {
border: 2px;
}
th.th {
border: solid;
}
tr th:last-child,
tr td:last-child {
border: 1px dashed #000;
border-right: 0;
}
<table>
<thead>
<tr>
<th class="th">h1</th>
<th class="th">h2</th>
<th class="th">h3</th>
</tr>
</thead>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
<td>r2c3</td>
</tr>
</table>

Answer 2

You can use the :last-child pseudo class selector. This works because those tds of the last table column are the last child elements of their trs.
I also had to remove the border of the table.
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
table {
border-collapse: collapse;
border-right: 0px;
/* border: 1px solid; */
}
td {
border: 1px solid;
}
thead {
border: 2px;
}
th.th {
border: solid;
}
th.th3 {
font-weight: normal;
}
td:last-child, th:last-child {
border: 1px dashed;
border-right: none;
}
<table>
<thead>
<tr>
<th class="th">h1</th>
<th class="th">h2</th>
<th class="th3">h3</th>
</tr>
</thead>
<tr>
<td>r1c1</td>
<td>r1c2</td>
<td>r1c3</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
<td>r2c3</td>
</tr>
</table>

Answer 3

One alternative approach to using a <table> is to deploy CSS Grid.
Working Example:
.my-table {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 300px;
height: 180px;
font-size: 24px;
gap: 1px;
}
.my-table-cell {
text-align: center;
line-height: 60px;
outline: 1px solid rgb(0, 0, 0);
}
/* FIRST TWO CELLS */
.my-table-cell:nth-of-type(-n + 2) {
font-weight: 900;
border: 1px solid rgb(0, 0, 0);
}
/* THIRD CELL */
.my-table-cell:nth-of-type(3) {
border-top: 1px dashed rgb(0, 0, 0);
}
/* CELLS ON THE RIGHT */
.my-table-cell:nth-of-type(3n) {
border-bottom: 1px dashed rgb(0, 0, 0);
outline: none;
}
<div class="my-table">
<div class="my-table-cell">h1</div>
<div class="my-table-cell">h2</div>
<div class="my-table-cell">h3</div>
<div class="my-table-cell">r1c1</div>
<div class="my-table-cell">r1c2</div>
<div class="my-table-cell">r1c3</div>
<div class="my-table-cell">r2c1</div>
<div class="my-table-cell">r2c2</div>
<div class="my-table-cell">r2c3</div>
</div>
Further Reading:
https://cssgridgarden.com/
https://css-tricks.com/snippets/css/complete-guide-grid/