Come posso impostare la tabella di stile come larghezza completa del contenitore e fare in modo che le celle utilizzino la percentuale della larghezza?

Question

Questo è il mio html. La tabella sottostante si trova all'interno di un contenitore div che ha una larghezza fissa di 670 px. Ora non sono sicuro di come procedere per fare in modo che questa tabella acquisisca l'intera larghezza del contenitore.

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

Questo è il mio 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; 
} 

ho cercato di impostare la larghezza: 100%; ma ha restituito spazi vuoti ma i TD non sono bilanciati. Non so come rendere i TD sempre pieni al 100% dello spazio. Ho provato a impostare la larghezza: 20% per ogni TD poiché sono 5 tds per ricevere il 100% della larghezza. Ma questo non ha funzionato. Qualcuno può dirmi come far sì che le celle si adattino alla larghezza della tabella 100% (dato che ogni TD ha una percentuale fissa di larghezza come il 20%) per favore.

Answer 1

Penso che il tuo problema è che hai display: block ignorando la modalità di visualizzazione predefinita per la tabella (che è table). Rimuovere quello e quindi provare a applicare width: 100% alla tabella.