Cómo hacer que una columna de tabla tenga un ancho mínimo

Aquí está el archivo de datos de la plantilla: https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

Estoy tratando de hacer que 8 de las 10 columnas de una tabla solo ocupen exactamente el ancho mínimo que necesitan, según el texto, respetando el relleno y los encabezados de las columnas.

En la imagen de ejemplo, quiero que todas menos las columnas 4 y 9 ocupen el ancho mínimo. Técnicamente, hay 9 encabezados de columna, y el último tiene un colspan de 2. El último encabezado es un span3. Me gustaría que la columna de porcentaje ocupe el menor ancho necesario y dejar que la barra de progreso o los botones de aprobado/ver/rechazado ocupen el resto.

La columna 4 está configurada para reemplazar el texto desbordado con puntos suspensivos.

Imagen de ejemplo:

Hay un truco que consiste en configurar algunas celdas a un ancho muy pequeño y luego aplicar un white-space: nowrap propiedad:

<table>
    <tr>
        <td class="min">id</td>
        <td class="min">tiny</td>
        <td>Fills space</td>
        <td>Fills space</td>
        <td class="min">123</td>
        <td class="min">small</td>
        <td>Fills space, wider</td>
        <td>Fills space</td>
        <td class="min">thin</td>
    </tr>
</table>

td {
    width: auto;
}

td.min {
    width: 1%;
    white-space: nowrap;
}

Demo en vivo

Como también puede ver en el violín anterior, nowrap obliga a la celda de la tabla a evitar cualquier salto de línea y, por lo tanto, alinear su ancho al mínimo posible.

NOTA: Si tiene un theaddesea aplicar el tdestilos de th también.

ACTUALIZACIÓN #1: Puntos suspensivos (…)

Para colapsar automáticamente una columna más larga en elipses, el text-overflow: ellipsis es lo que probablemente estés buscando:

td.cell-collapse {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

Demo en vivo

Esto también requiere overflow ajustado a hiddenasí como un width o max-width con un valor fijo. Añade el cell-collapse clase a las celdas cuyo ancho le gustaría limitar.

ACTUALIZACIÓN #2: Manejo de Bootstrap

Bootstrap table conjuntos de clase width: 100%; lo que estropeará este enfoque. Puedes arreglar eso con table { width: inherit !important; }

Demo en vivo

NOTA: Las tablas en este enfoque ya tienen ancho completo porque las celdas de la tabla ya tienen width: auto;.

Se eliminó la solución anterior basada en Javascript, ya que el enfoque basado en CSS puro ahora funciona de manera consistente en todos los navegadores modernos. El código original todavía está disponible en el enlace JSfiddleComentado.

Si conoce los tamaños que desea para su columna y son fijos, sugiero usar un diseño de tabla fijo. Te permite especificar el % fijo que toma cada columna.

Aquí hay un enlace que me ayudó en una situación similar.
http://css-tricks.com/fixing-tables-long-strings/