¿Cómo puedo hacer para que la tabla de estilo tenga el ancho completo del contenedor y hacer que las celdas usen el porcentaje del ancho?

Question

Este es mi html. La tabla a continuación 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> 

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

traté de establecer el ancho: 100%; pero devolvió espacios vacíos, pero los TD no están equilibrados. No sé cómo hacer que los TD siempre llenen el 100% del espacio. Intenté establecer el ancho: 20% para cada TD, ya que son 5 tds para recibir 100% de ancho. Pero esto no funcionó. ¿Puede alguien decirme cómo hacer que las celdas encajen en el ancho total de la mesa al 100% (dado que cada DT tiene un porcentaje fijo de ancho como 20%), por favor?

Answer 1

Creo que su problema es que tiene display: block anulando el modo de visualización predeterminado para la tabla (que es table). Quítelo y luego intente aplicar width: 100% a la mesa.