html - examples - ¿Cómo puedo diseñar la tabla para que tenga el ancho completo del contenedor y hacer que las celdas usen un porcentaje del ancho?

table css generator

Question

Este es mi html. La siguiente tabla está dentro de un contenedor div que tiene un ancho fijo de 670px. Ahora no estoy seguro de cómo proceder para que esta tabla capture todo el ancho del contenedor.

<table class="table_fields">
    <tr class="table_fields_top">
        <td><?php _e(''Published'',''news''); ?></td>
        <td><?php _e(''Story'',''news''); ?></td>
        <td><?php _e(''Views'',''news''); ?></td>
        <td><?php _e(''Comments'',''news''); ?></td>
        <td><?php _e(''Rating'',''news''); ?></td>
    </tr>
</table>

Este es mi CSS:

.table_fields {
    display: block;
    background: #fff;
    border: 1px solid #dce1e9;
    border-bottom: 0;
    border-spacing: 0;
}

.table_fields .table_fields_top {background: #f1f3f6;}
.table_fields .table_fields_top td{
    font-size: 10px;
    text-transform: uppercase;
}

.table_fields td {
    text-align: center;
    border-bottom: 1px solid #dce1e9;
    border-right: 1px solid #dce1e9;
    font-size: 11px;
    line-height: 16px;
    color: #666;
    white-space:nowrap;
}

Intenté establecer el ancho: 100%; pero volvió espacios vacíos pero los TD no están equilibrados. No sé cómo hacer que los TD siempre estén llenos al 100% del espacio. Intenté establecer el ancho: 20% para cada TD ya que son 5 tds para recibir el 100% de ancho. Pero esto no funcionó. Alguien me puede decir cómo hacer que las celdas encajen en el ancho total de la tabla al 100% (dado que cada TD tiene un porcentaje fijo de ancho del 20%), por favor.

Answer 1

Creo que su problema es que tiene display: block anula el modo de pantalla predeterminado para la tabla (que es la table ). Elimine eso y luego intente aplicar el width: 100% a la tabla.