'HTML table column styling using CSS

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:
Expected result

htmlcsspowerbidax


Solution 1:[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>

Solution 2:[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>

Solution 3:[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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 yainspan
Solution 2
Solution 3

Related Questions