CODEWITHSUNDEEP
csshtml-tablewidth
Zhao Li
Zhao Li

Reputation: 5686

How to set column width to be as small as possible?

I'm trying to set the last three columns to be as small as possible since they're just holding icons/links for actions.

I'd also want to the large text columns to have as much of the remaining width as possible.

Here's what I was able to find, but didn't work for me:

Two columns table : one as small as possible, the other takes the rest

This solution doesn't work for me because I have multiple columns that I want to take up as much space as possible, so I can't set any of them to width = 100%.

force column size to smallest possible

I tried using relative lengths (width="*"), but it doesn't seem to have any effect. Maybe it's because I didn't set any widths prior so there's no 'remaining width' to distribute out?

HTML:

<table>
  <colgroup class='data' span='5'>
    <col class='date' span='1'/>
    <col class='id' span='1'/>
    <col class='title' span='1'/>
    <col class='status' span='1'/>
    <col class='description' span='1'/>
  </colgroup>
  <colgroup class='action' span='3'>
    <col class='show' span='1'/>
    <col class='edit' span='1'/>
    <col class='delete' span='1'/>
  </colgroup>
  <tr>
    <th>Date</th>
    <th>ID</th>
    <th>Title</th>
    <th>Status</th>
    <th>Description</th>
    <th colspan='3'></th>
  </tr>

  <tr>
    <td class='date'>medium</td>
    <td class='id'>medium</td>
    <td class='title'>large</td>
    <td class='status'>medium</td>
    <td class='description'>large</td>
    <td class='show'>small</td>
    <td class='edit'>small</td>
    <td class='delete'>small</td>
  </tr>
</table>

CSS:

table {
  width: 100%;
}

table td.title, td.description {
  text-align: left;
}

table td.date, td.id, td.status {
 text-align: center;
}

table td.show, td.edit, td.delete {
}

table colgroup.action col {
  width:"1*";
}

table colgroup.data col {
  width:"*";
}

So in the order of priority:

I don't need the colgroup and col tags, but I just left them in here in case they can be useful. I've tried different permutations of using and not using them, but still can't seem to get it to work. I also thought about using percents for the data columns, but I'd want the browser to determine the widths based on the actual content rather than me imposing predefined rules that might not be optimal.

Upvotes: 5

Views: 8496

Answers (2)

Big McLargeHuge
Big McLargeHuge

Reputation: 16056

For the columns you want to shrink, set the width to 1 px:

table {
  width: 100%;
}

th, td {
  border: 1px solid #eee;
}

td.title, td.description {
  text-align: left;
}

td.date, td.id, td.status {
  padding: 0 10px;
  text-align: center;
  width: 1px;
}

td.show, td.edit, td.delete {
  width: 1px;
}

Then you can get rid of the colgroups altogether.

See demo here.

By the way, you might consider using CSS flexible boxes instead.

Upvotes: 3

Jason Gennaro
Jason Gennaro

Reputation: 34855

To answer one of your requests:

the last three icon/action columns to be as small as possible without any cutoff

To do this, I would float the tds or set them to display:inline-block;

If you know the size of the icons you are using, you can then set the width on the th above the icons (which I would call class="icons").

If you don't know the width, you could calculate using some jQuery.

var a = $('td.show').width();
var b = $('td.edit').width();
var c = $('td.delete').width();

$('.icons').css('width', a+b+c+6+"px");

Example: http://jsfiddle.net/KQs2K/1/

Extra 6px needed to pad out the border bits I threw in the example

Note: these tds will stack when the screen size gets real small.

Upvotes: 0

Related Questions