Geek asks and answers

How to set column width as small as possible?

I am trying to set the last three columns as small as possible, as they just contain icons / links for actions.

I would also like the large text columns to have as much remaining width as possible.

Here is what I could find, but didn't work for me:

Table of two columns: one as small as possible, the other takes the rest

This solution does not work for me, because I have several columns that I want to take up as much space as possible, so I can not set their width = 100%.

set the column size to the minimum possible

I tried using relative lengths (width = "*"), but it seems to have no effect. Maybe because I did not set a single width, so there is no "remaining width" for distribution?

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 order of priority:

  • the table covers the entire width of the parent container

  • the last three characters / columns of the action should be as small as possible without trimming

  • columns with "big" data (heading and class description) should occupy as much of the remaining space as possible

  • columns with "average" data should be the size of their contents with some margin on both sides (I don't mind just throwing a fixed width if it's too hard to do)

colgroup col, , . , . , , , , .

+5
2

:

/ ,

, float td display:inline-block;

, , th ( class="icons").

, , jQuery.

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

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

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

6px, ,

: td , .

0

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

.

.

, CSS .

+3

More articles:


All Articles