¿Cómo establecer el ancho de columna para que sea lo más pequeño posible?

Question

Estoy tratando de configurar las tres últimas columnas para que sean lo más pequeñas posible ya que solo tienen iconos/enlaces para las acciones.

También me gustaría que las columnas de texto grande tengan la mayor cantidad posible del ancho restante.

Esto es lo que yo era capaz de encontrar, pero no funcionó para mí:

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

Esta solución no funciona para mí porque tengo varias columnas que quiero tomar tanto espacio como sea posible, por lo que no puedo establecer ninguno de ellos al ancho = 100%.

force column size to smallest possible

He intentado utilizar longitudes relativas (anchura = "*"), pero no parece tener ningún efecto. Tal vez es porque no establecí ningún ancho antes, así que no hay 'ancho restante' para distribuir?

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:"*"; 
} 

Así, en el orden de prioridad:

• tabla abarca todo el ancho del contenedor primario

• la última thre columnas icono de acción/e para ser lo más pequeño posible, sin cortes,

• las columnas con datos de 'grandes' (título de clase y descripción) debe asumir la mayor cantidad de espacio que queda como posibles

• las columnas con los datos 'medio' deben ser del tamaño de su contenido con cierto margen en ambos lados (no me importa simplemente tirar en un ancho fijo si es demasiado difícil de lograr esto)

no necesito las etiquetas colgroup y col, pero simplemente las dejé aquí en caso de que puedan ser útiles. Probé diferentes permutaciones para usar y no usarlas, pero parece que no funciona. También pensé en usar porcentajes para las columnas de datos, pero me gustaría que el navegador determine los anchos basados ​​en el contenido real en lugar de imponer reglas predefinidas que podrían no ser óptimas.

Answer 1

Para responder a una de sus peticiones:

las tres últimas columnas icono/acción a ser tan pequeño como sea posible sin cualquier corte

Para ello, me float los td s o configúrelos en display:inline-block;

Si conoce el tamaño de los iconos que está utilizando, puede establecer el ancho en th abov e los iconos (que yo llamaría class="icons").

Si no conoce el ancho, puede calcular usando jQuery.

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

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

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

6px extra necesario para rellenar los bits de frontera tiré en el ejemplo

Nota: estos td s se apilarán cuando el tamaño de la pantalla se pone muy pequeña.

Answer 2

Para las columnas que desea reducir, definir el ancho de 1 píxel:

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

Entonces usted puede deshacerse de las colgroups por completo.

Ver demo here.

Por cierto, puede considerar usar CSS flexible boxes en su lugar.