Hide Table Column in CSS

Question

I have a table that is automatically generated by some software that I am using, the Table is QOProducts and has the four columns as below:

<table id="QOProducts" border="1" style="visibility: visible; display: block;">
<tbody>
<tr>
<th>
<b>Thumbnail</b>
</th>
<th style="width:250px;">
<b>Product Name</b>
</th>
<th style="width:150px;">
<b>Description</b>
</th>
<th>
<b>Quantity</b>

I have tried a few ways but does anyone know if it is possible to hide the second column in the global css file as I do not have direct access the the page. Or would I need to use jQuery?

Any ideas appreciated.

Possible duplicate of [How to hide columns in HTML table?](http://stackoverflow.com/questions/5440657/how-to-hide-columns-in-html-table) — Thomas, Nov 24 '15 at 10:39

score 3 · Accepted Answer · answered Nov 24 '15 at 10:42

3

If you want a solution that doesn't require nth-child (which isn't supported by old browsers such as IE8), you can use the fact that these old browsers do support first-child.

#QOProducts th:first-child + th, #QOProducts td:first-child + td {
  display:none;
}

<table id="QOProducts" border="1" >
  <tbody>
    <tr>
      <th>
        <b>Thumbnail</b>
      </th>
      <th style="width:250px;">
        <b>Product Name</b>
      </th>
      <th style="width:150px;">
        <b>Description</b>
      </th>
      <th>
        <b>Quantity</b> 
    <tr><td>test<td>test<td>test<td>test</tr>
</table>

answered Nov 24 '15 at 10:42

Mr Lister

45,515
15
108
150

I was actually thinking about adding the `+` adjacent operator to the answer but I thought, meh - 2k15 with IE 11 and Edge 12 ^.^ – SidOfc Nov 24 '15 at 10:44
1

@SidneyLiebrand Heh... Actually I had only nth-child in the solution, but as I was ready to hit the "Post" button, I saw there were 3 answers already, so I had to do _something_ to add something useful, instead of throwing my answer away. – Mr Lister Nov 24 '15 at 10:47

score 2 · Answer 2 · answered Nov 24 '15 at 10:37

2

This ought to work

#QOProducts tr td:nth-child(2), #QOProducts tr th:nth-child(2) {
    display:none;
}

answered Nov 24 '15 at 10:37

Andrew Bone

7,092
2
18
33

score 1 · Answer 3 · answered Nov 24 '15 at 10:37

1

Try adding this in your CSS

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

answered Nov 24 '15 at 10:37

Gerrit Bertier

4,101
2
20
36

SidOfc · Answer 4 · 2017-03-04T23:05:35.257

You are looking for the nth-child(n) selector here, in your case you want to hide the second column so I assume that you mean the second td of every tr.

This would add up to

#QOProducts tr td:nth-child(2) {
    display: none;
}

Even tho that only targets td's in a tr - if you're unsure about your structure you could simplify the selector and make it more global.

#QOProducts > * > td:nth-child(2) {
    display: none;
}

this would target only direct td children of the direct children of the table (if that makes any sense to you whatsoever)

If you need to also hide the second td of any nested tables etcetera you could always do this

#QOProducts td:nth-child(2) {
    display: none;
}

which will hide all the second child td's for you.

Hide Table Column in CSS

4 Answers4