Wie kann ich die Tabelle so formatieren, dass sie die volle Breite des Containers hat und die Zellen einen Prozentsatz der Breite verwenden?

Question

Das ist mein HTML. Die Tabelle unten befindet sich in einem Container div, der eine feste Breite von 670px hat. Jetzt bin ich mir nicht sicher, wie ich vorgehen soll, damit diese Tabelle die volle Containerbreite erfasst.

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

Das ist mein 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; 
} 

Ich versuchte Breite einzustellen: 100%; aber es gab leere Felder zurück, aber die TDs sind nicht ausgeglichen. Ich weiß nicht, wie man die TDs immer zu 100% voll macht. Ich habe versucht, Breite zu setzen: 20% für jeden TD, da sie 5 tds sind, um 100% Breite zu erhalten. Aber das hat nicht funktioniert. Kann mir jemand sagen, wie man die Zellen in die FULL-Breite der Tabelle 100% (vorausgesetzt, jeder TD hat einen festen Prozentsatz der Breite wie 20%) bitte machen.

Answer 1

Ich denke, Ihr Problem ist, dass Sie display: block überschreiben den Standard-Anzeigemodus für die Tabelle (die table ist). Entfernen Sie das, und wenden Sie dann width: 100% auf dem Tisch an.