CODEWITHSUNDEEP
htmlcss
dryhay
dryhay

Reputation: 79

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

Upvotes: 2

Views: 77

Answers (3)

Rounin
Rounin

Reputation: 29463

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:

Upvotes: 0

lupz
lupz

Reputation: 3638

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>

Upvotes: 3

yaakov
yaakov

Reputation: 4665

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>

Upvotes: 3

Related Questions