How can i hide certain table column in a HTML table using CSS

Question

I have a html table which is as follows

<table class="report">
    <tbody>
      <tr>
        <td >col1</td>
        <td >col2</td>
        <td>col3</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
      <tr>
        <td>R2</td>
        <td >2/17</td>
        <td >{2/17}</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
    </tbody>
</table>

as you can see , after col3 , all subsequent columns are empty. I want to show only first three columns and hide the rest. How can i achieve this using CSS. I dont have control over HTML table so i can not modify it.

Thanks

are you using jquery ? if yes, see my post... no need to modify the html — Dwza
– Dwza, Commented Dec 19, 2013 at 13:12
now you have accepted mat's answere... but now i have a question for you... why you have the empty td's ? because the solution of mat is kinda strict and cant really be changed dynamicly only if you use LESS what also need js ^^ — Dwza
– Dwza, Commented Dec 19, 2013 at 13:35
This table is generate from a XLS file by using apache poi. which also generates empty columns and generated HTML is shown in a web app using Iframe where i dont have access to JS. so i plan to inject this CSS along with generated html. BTW thanks for your help. — Mukesh Kumar
– Mukesh Kumar, Commented Dec 19, 2013 at 13:54
no problem other one like charlie don't see that im just trying to help and than devote posts to ... in the end i don't know what he tries to achieve with this. — Dwza
– Dwza, Commented Dec 19, 2013 at 14:01

Gerico · Accepted Answer · 2013-12-19 13:24:28Z

6

You can indeed do this:

http://jsfiddle.net/nEQ6g/1/

*EDIT - From my knowledge nth-child and visability: hidden don't play nice together. For what you want, you'd need to use display: none; - based upon the code I've provided you.

CSS:

table{
    border-collapse: collapse;
}

table tr td{
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

table tr td:nth-child(n+4){
    display: none;
}

edited Dec 19, 2013 at 13:24

answered Dec 19, 2013 at 13:12

Gerico

5,18914 gold badges50 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Charlie74 · Accepted Answer · 2013-12-19 13:12:24Z

1

Use something like this...

CSS

td:nth-child(4), td:nth-child(5), td:nth-child(6), td:nth-child(7)
{
   display:none;
}

DEMO

answered Dec 19, 2013 at 13:12

Charlie74

2,91317 silver badges23 bronze badges

7 Comments

Abhitalks Over a year ago

How is it different from @StuartLC's answer?

Gerico Over a year ago

This wouldn't work if the cells were to dynamically increase. Also it's a lot of CSS, that could be achieved in one reference using n+4

Charlie74 Over a year ago

@abhitalks It's not. Mine was first (see, unedited). His was changed later to match this one.

Charlie74 Over a year ago

@Mat-visual there is always a what if... what if he adds more cells, deletes some, changes things, etc. My answer simply does what the OP asked for. Nothing more, nothing less.

Gerico Over a year ago

Ok, but it still stands, instead of writing so much CSS, you can write one line: td:nth-child(n+4) and save yourself time and code.

|

jcklie · Accepted Answer · 2013-12-19 13:20:48Z

1

td:nth-child(n+4) {
    visibility: hidden
}

http://jsfiddle.net/hZRvx/

I think that that is the most clearest way to do it.

edited Dec 19, 2013 at 13:20

answered Dec 19, 2013 at 13:06

jcklie

4,0943 gold badges26 silver badges44 bronze badges

2 Comments

Mukesh Kumar Over a year ago

I dont want to modify the HTML

Gerico Over a year ago

If he did this, he wouldn't even need nth-child. You'd simply hide the class with the new class on it..

StuartLC · Accepted Answer · 2013-12-19 13:08:31Z

0

You can use css3 nth child selector, e.g.

td:nth-child(4),td:nth-child(5), ...
{
   display:none;
}

jsFiddle here

answered Dec 19, 2013 at 13:08

StuartLC

108k18 gold badges225 silver badges294 bronze badges

3 Comments

Mukesh Kumar Over a year ago

this will hide the third col. i want to show first three and hide columns after third column.

StuartLC Over a year ago

Yeah, my counting sucks. But you get the idea.

Ronnie Over a year ago

someone downvoted?? Just change 3 to 4 and it should work. Though, doing so easy things in CSS3 isn't recommended at all (i sometimes use lynx thats why I prefer CSS2)

Leo · Accepted Answer · 2013-12-19 13:10:42Z

0

I've got no idea what's the intent, the reason or the audience but if you append a data attribute to each column cell...

<td data-col="1"></td>

You can then use jQuery to hide all cells that belong to a specific column...

$('td[data-col=1]').hide ();

You could also use the ':nth-child ()' css pseudo class but it is not supported by some IE browsers

Hope it makes sense

answered Dec 19, 2013 at 13:10

Leo

14.9k2 gold badges44 silver badges59 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

If you always want to show the first 3 colums and hide the rest of the colums in the row you might want to use:

tr > td:nth-child(n+4)
{
    visibility: hidden;
}

This will start at the index of 4 and will loop through the rest and will hide them.

With visibility: hidden; you will still keep the spacing it had.

jsFiddle

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 19, 2013 at 13:12

nkmol

8,1093 gold badges34 silver badges55 bronze badges

Comments

Dwza · Accepted Answer · 2013-12-19 13:10:20Z

-1

this is a jquery solution. it checks if there is only a whitespace in there... if yes, it hides it.

$('td').each(function(){
  if($(this).html() == "&nbsp;")
      $(this).hide();
});

answered Dec 19, 2013 at 13:10

Dwza

6,5657 gold badges45 silver badges79 bronze badges

6 Comments

Gerico Over a year ago

The OP asked for a CSS solution

Dwza Over a year ago

but he also sayed he don't want to edit his html... in this case there is no other posibility. so maybe he uses jquery or some like this and than this can be helpful

Charlie74 Over a year ago

I agree that giving the OP choices is a good thing. He asked for CSS, but that may be because he isn't aware of other methods available. Why not give him options?

Dwza Over a year ago

there are no options... the only thing what he can do is, edit html or use javascript/jquery or php :)

Charlie74 Over a year ago

@Dwza LOL you know that's completely wrong, right? This is easily done via CSS.

|

Collectives™ on Stack Overflow

How can i hide certain table column in a HTML table using CSS

7 Answers 7

Comments

DEMO

7 Comments

2 Comments

3 Comments

Comments

jsFiddle

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

7 Comments

2 Comments

3 Comments

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related