HTML table column styling using CSS-CodePudding

I have the following HTML table and I need a different styling in the last column:

CodePudding user response：

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 >h1</th>
      <th >h2</th>
      <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>

CodePudding user response：

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 >h1</th>
      <th >h2</th>
      <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>

CodePudding user response：

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 >
  <div >h1</div>
  <div >h2</div>
  <div >h3</div>
  
  <div >r1c1</div>
  <div >r1c2</div>
  <div >r1c3</div>
  
  <div >r2c1</div>
  <div >r2c2</div>
  <div >r2c3</div>
</div>

Further Reading: