HTML table column styling using CSS

user_2290511 0
Viewed 63

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

css html
3 Answers

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>

user_46331970

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>

user_11674280

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:

user_38977750
Related