Làm cách nào để tạo kiểu bảng có chiều rộng đầy đủ của vùng chứa và làm cho các ô sử dụng phần trăm chiều rộng?

Question

Đây là html của tôi. Bảng bên dưới nằm trong div chứa có chiều rộng cố định là 670px. Bây giờ tôi không chắc chắn làm thế nào để tiến hành để làm cho bảng này nắm bắt chiều rộng đầy đủ của container.

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

Đây là CSS của tôi:

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

Tôi cố gắng để thiết lập width: 100%; nhưng nó trả về không gian trống nhưng TD không cân bằng. Tôi không biết làm thế nào để làm cho TD luôn đầy 100% không gian. Tôi đã cố gắng thiết lập chiều rộng: 20% cho mỗi TD vì chúng là 5 tds để nhận được 100% chiều rộng. Nhưng điều này không hiệu quả. Ai đó có thể cho tôi biết làm thế nào để làm cho các tế bào phù hợp trong chiều rộng FUll của bảng 100% (cho mỗi TD có một tỷ lệ phần trăm cố định của chiều rộng như 20%) xin vui lòng.

Answer 1

Tôi nghĩ rằng vấn đề của bạn là bạn có display: block ghi đè chế độ hiển thị mặc định cho bảng (là table). Loại bỏ nó, và sau đó thử áp dụng width: 100% vào bảng.