CODEWITHSUNDEEP
htmlcssmobile
Josh
Josh

Reputation: 3288

Collapse a table's column with pure CSS

I have a table with entire columns I'd like to hide from view.

The real-life scenario is mobile platforms. I desire a table's less useful information to be hidden so that it fits on a narrow screen.

I've played around with it but there doesn't seem to be a true way to get this to happen.
http://jsfiddle.net/3712Ledn/

Even if I apply the class to all cells of the same column and then apply hidden or collapse, they still take up space.

If I turn display: none;, then the columns do collapse, but auto width columns do not expand to take up the new space.

Is there any way to achieve this without using JS?

Upvotes: 1

Views: 6210

Answers (2)

Olli Zi
Olli Zi

Reputation: 335

Maybe this helps if i understand you. The seconds column is hidden and the first column stretches over the full page. http://jsfiddle.net/uow30orv/

<table id="real" width="100%">...

Upvotes: 1

romuleald
romuleald

Reputation: 1434

You will need a tag inside the cell you want to collapse, then use a table-layout: fixed; on your <table>, this way, you will be able to set a width: 0; to the column you want to hide.

Upvotes: 1

Related Questions