How to remove an html <table> column using only CSS?

Question

I have an HTML <table> with many columns, so when my web page is displayed on a mobile browser, it's too small. So I'm creating a media query and I want to remove some columns (That are not important).

So how to remove an html column using only css ?

For example, how to remove the column "B" in the middle of the table on the next example :

table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

<table>
<th>A</th>
<th>B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Answer 1

<style>
        table, th, td, tr{
  border:1px solid black;
}

table{
  width:100%;
}

  @media (max-width: 768px){

    tr th:nth-child(2),tr td:nth-child(2){

      display:none;
    }

  }
    </style>

Answer 2

Not what you asked for, but how about making the table horizontally scrollable?

The scrollbar will only appear when the window cannot fit the content if you use overflow-x: auto.

table,
th,
td,
tr {
  border: 1px solid black;
}
table {
  width: 100%;
}
.hscroll {
  overflow-x: auto;
}
.example {
  white-space: nowrap;
}

<div class="hscroll">
  <table>
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td class="example">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 3

You can use n-th child to manage table columns.

th:nth-child(2) { display:none; }

Answer 4

Use css :nth-child() and inside media query write styles for hiding columns:

table, th, td, tr{
  border:1px solid black;
}

table {
  width:100%;
}

@media all and (max-width: 768px){
  table tr th:nth-child(2),
  table tr td:nth-child(2) {
    display: none;
  }
}

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td> 
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>94</td>
    </tr>
  </tbody>
</table>

Answer 5

If you use nth-child, it will cause issues later when you add/remove more th/td's. Better use a class which you can reuse in your entire application.

---

<table>
<th>A</th>
<th class="hide-on-mobile">B</th>
<th>C</th>

<tr>
    <td>Jill</td>
    <td class="hide-on-mobile">Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td class="hide-on-mobile">Jackson</td> 
    <td>94</td>
  </tr>
</table>

@media (max-width: 768px){
    hide-on-mobile{
      display:none;
    } 
  }

Answer 6

The proper way is using col elements with visibility: collapse.

<colgroup>
  <col />
  <col />
  <col />
</colgroup>

col:nth-child(2) {
  visibility: collapse;
}

table, th, td, tr {
  border: 1px solid black;
}
table {
  width: 100%;
}
col:nth-child(2) {
  visibility: collapse;
}

<table>
  <colgroup>
    <col />
    <col />
    <col />
  </colgroup>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </tbody>
</table>

This way will work properly even if you use colspan.

However, note the layout of the table will be calculated before hiding the columns. And at the end, the remaining columns won't grow to make the table respect width: 100%. As described in Dynamic effects, this avoids expensive re-layout operations. To compensate this, you can increase the width of the table beyond 100%.

div {
  overflow: hidden;
  margin: 20px 0;
}
table, th, td, tr {
  border: 1px solid black;
}
table {
  width: 100%;
  table-layout: fixed;
}
table.grow {
  width: 150%;
}
col.hidden {
  visibility: collapse;
}

<div>
  Full table
  <table>
    <colgroup>
      <col />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Hiding last column
  <table>
    <colgroup>
      <col />
      <col />
      <col class="hidden" />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>
<div>
  Hiding last column and enlarging table
  <table class="grow">
    <colgroup>
      <col />
      <col />
      <col class="hidden" />
    </colgroup>
    <thead>
      <tr>
        <th colspan="2">A B</th>
        <th>C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
      </tr>
      <tr>
        <td colspan="2">Eve Jackson</td>
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>