CODEWITHSUNDEEP
htmlcsscss-tables
Sushi
Sushi

Reputation: 676

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

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>

Upvotes: 5

Views: 21027

Answers (9)

DraganAscii
DraganAscii

Reputation: 322

If you must use html tables I would recommend using stacktable.js. Otherwise use css display tables.

Upvotes: 0

Oriol
Oriol

Reputation: 288580

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>

Upvotes: 1

rybo111
rybo111

Reputation: 12588

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>

Upvotes: 2

Vucko
Vucko

Reputation: 20844

To remove the second column:

table tr>th:nth-of-type(2),   table tr>td:nth-of-type(2){
    display: none;
}


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

table {
  width: 100%;
}

@media (max-width: 900px){ /* use your media breakpoint */
  table tr>th:nth-of-type(2),   table tr>td:nth-of-type(2){
    display: none;
  }
}
<table>
  <tr>
    <th>A</th>
    <th id="foo">B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

JSFiddle

Note: your HTML is not valid - th must also be inside the tr element.

Upvotes: 0

Jurik
Jurik

Reputation: 3264

Since everyone goes straight forward, I would like to recommend you bootstrap - this would help you in many situations when dealing with responsive design. After installing it, you will have to modify your code like this:

<table>
  <tr>
    <th>A</th>
    <th class="hidden-xs">B</th>
    <th>C</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td class="hidden-xs">Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td class="hidden-xs">Jackson</td> 
    <td>94</td>
  </tr>
</table>

You can read more about it at this question.

Upvotes: -2

Nikhilesh K V
Nikhilesh K V

Reputation: 1480

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;
    } 
  }

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39372

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>

Upvotes: 1

iyyappan
iyyappan

Reputation: 777

<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>

Upvotes: 6

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

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

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

Upvotes: 1

Related Questions