Html Question posted in
Some basic documentation can be found here.

Html – Set border to table header

I am working on a table that can have no headers, the first row as a header, the first column as a header, or both the first column and the first row as headers.

The expected output is that the headers should have a border on the right, except when the first row is set as the header

Expected output
Expected output

But the current output is
current output

The issue is that I am getting a border-right even when the first row is set as the header. Is there a solution to avoid this?

table {
  border: 1px solid #D2D2D2;
  border-collapse: collapse;
  th {
    padding: 16px;
    border-right: 1px solid #D2D2D2;
    background: #F1F1F1
  }
  td {
    padding: 16px;
  }
  tr {
    border-bottom: 1px solid #D2D2D2;
  }
  tr:first-child th:not(:first-child) {
    border-right: 0;
  }
}
<p> Table with first row as header</p>
<table>
  <tbody>
    <tr>
      <th>Fruits</th>
      <th>Veggies</th>
      <th>Junks</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Carrot</td>
      <td>Burger</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Betroot</td>
      <td>Fries</td>
    </tr>
  </tbody>
</table>
<p> Table with first column as header</p>
<table>
  <tbody>
    <tr>
      <th>Fruits</th>
      <td>Veggies</td>
      <td>Junks</td>
    </tr>
    <tr>
      <th>Apple</th>
      <td>Carrot</td>
      <td>Burger</td>
    </tr>
    <tr>
      <th>Orange</th>
      <td>Betroot</td>
      <td>Fries</td>
    </tr>
  </tbody>
</table>
<p> Table with first row and column as header</p>
<table>
  <tbody>
    <tr>
      <th>Fruits</th>
      <th>Veggies</th>
      <th>Junks</th>
    </tr>
    <tr>
      <th>Apple</th>
      <td>Carrot</td>
      <td>Burger</td>
    </tr>
    <tr>
      <th>Orange</th>
      <td>Betroot</td>
      <td>Fries</td>
    </tr>
  </tbody>
</table>
<p>Table with no header</p>
<table>
  <tbody>
    <tr>
      <td>Fruits</td>
      <td>Veggies</td>
      <td>Junks</td>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Carrot</td>
      <td>Burger</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Betroot</td>
      <td>Fries</td>
    </tr>
  </tbody>
</table>

codepen

NOTE : I don’t have access to add/modify the HTML or add JS. Also the order of the tables here are just for example, it changes based on the requirement

Tags:

2

Answers


  1. 0

    You can fix this using CSS.

    I have added &:nth-of-type(1) tr:first-child th { border-right: 0; }

    nth-of-type(1) – Select only first Table
    tr:first-child – Select first header row of first Table

    For more info you can check MDN documentation
    Link – https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

    Updated Code is below.

    table{
      border: 1px solid #D2D2D2;
      border-collapse: collapse;
      th{
         padding: 16px;
         border-right: 1px solid #D2D2D2;
         background: #F1F1F1 
      }
      td{
         padding: 16px;
      }

      tr{
         border-bottom: 1px solid #D2D2D2;
      }
      tr:first-child th:not(:first-child){
         border-right: 0;
      }
      &:nth-of-type(1) tr:first-child th {
         border-right: 0;
      }
   }
    <p> Table with first row as header<p>
<table>
  <tbody>
    <tr>
      <th>Fruits</th>
      <th>Veggies</th>
      <th>Junks</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Carrot</td>
      <td>Burger</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Betroot</td>
      <td>Fries</td>
    </tr>
  </tbody>
</table>
<p> Table with first column as header<p>
<table>
  <tbody>
    <tr>
      <th>Fruits</th>
      <td>Veggies</td>
      <td>Junks</td>
    </tr>
    <tr>
      <th>Apple</th>
      <td>Carrot</td>
      <td>Burger</td>
    </tr>
    <tr>
      <th>Orange</th>
      <td>Betroot</td>
      <td>Fries</td>
    </tr>
  </tbody>
</table>
<p> Table with first row and column as header<p>
<table>
  <tbody>
    <tr>
      <th>Fruits</th>
      <th>Veggies</th>
      <th>Junks</th>
    </tr>
    <tr>
      <th>Apple</th>
      <td>Carrot</td>
      <td>Burger</td>
    </tr>
    <tr>
      <th>Orange</th>
      <td>Betroot</td>
      <td>Fries</td>
    </tr>
  </tbody>
</table>
<p> Table with no header<p>
<table>
  <tbody>
    <tr>
      <td>Fruits</td>
      <td>Veggies</td>
      <td>Junks</td>
    </tr>
    <tr>
      <td>Apple</td>
      <td>Carrot</td>
      <td>Burger</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>Betroot</td>
      <td>Fries</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    The border-right is removed for all headers in the first row except the first column (using :not(:first-child)).
    A specific rule ensures that the first column headers (th:first-child) always retain their border-right style, even when it’s part of a table that also has the first row as a header

    <style>
  table {
    border: 1px solid #D2D2D2;
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 16px;
    border-right: 1px solid #D2D2D2;
    border-bottom: 1px solid #D2D2D2;
  }
  th {
    background: #F1F1F1;
  }
  /* Disable right border for headers in the first row */
  tr:first-child th:not(:first-child) {
    border-right: 0;
  }
  /* Always add border-right for first column headers */
  tr th:first-child {
    border-right: 1px solid #D2D2D2;
  }
  /* Set borders for table rows except headers */
  tr:last-child td {
    border-bottom: 0;
  }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search