Bảng có 3 cột. Chiều rộng cột trung tâm cố định. Làm thế nào để có chiều rộng chia sẻ trên hai cột khác?

Question

tôi có bảng chiều rộng 100% với 3 cột. Cột giữa phải rộng 600px. Làm thế nào tôi có thể có hai chiều rộng bằng nhau trong khi sử dụng hết không gian còn lại?

<table style="width: 100%"> 
    <tr> 
     <td>left</td> 
     <td style="width: 600px">center</td> 
     <td>right</td> 
    </tr> 
</table> 

Hiện tại, tùy thuộc vào nội dung của cột trái hoặc phải, chúng luôn không đồng đều. Tôi đã thử thiết lập chiều rộng 50% ở bên trái và bên phải cũng như các số khác và thử nghiệm với độ rộng tối thiểu.

Vui lòng không jquery/javascript. Cảm ơn bạn

Answer 1

Tôi đoán "align = center" được sử dụng với cột trung tâm có thể giúp bạn.

Answer 2

Việc sử dụng thẻ "colgroup" có thể là một trợ giúp tuyệt vời cho việc này.

<table class="fixed-center-table" border="1"> 
     <thead> 
      <colgroup> 
       <col> 
       <col id="middle-column"> 
       <col> 
      </colgroup> 
      <tr> 
       <th>First Column</th> 
       <th></th> 
       <th>Third Column</th> 
      </tr> 
     </thead> 

     <tbody> 
      <tr> 
       <td>AAAAAA</td> 
       <td>BBBB</td> 
       <td>CCCCC</td> 
      </tr> 
      <tr> 
       <td>AAAAAA</td> 
       <td>BBBB</td> 
       <td>CCCCC</td> 
      </tr> 
      <tr> 
       <td>AAAAAA</td> 
       <td>BBBB</td> 
       <td>CCCCC</td> 
      </tr> 
     </tbody> 
</table> 

.fixed-center-table { 
    table-layout: fixed; 
    width: 100%; 
    border-collapse: collapse; 
} 

.fixed-center-table td{ 
    text-align: center; 
} 

col#middle-column { 
    width: 600px; 
} 

Answer 3

Câu trả lời mới cho câu hỏi cũ này.

1. Give cột giữa th một max-width và min-width thay vì width
2. Cho trái và phải th một width của 50%.
3. Không cung cấp cho số table a width.

Tôi đã sửa cột giữa ví dụ này width tại 300px.

jsBin Example!

CSS

table { 
    border-collapse: collapse; 
} 
th, td { 
    border: solid 1px #CCC; 
    padding: 10px; 
} 
.fixed { 
    max-width: 300px; 
    min-width: 300px; 
} 
.fluid { 
     width: 50%; 
} 

HTML

<table> 
    <thead> 
     <tr> 
      <th class="fluid">First Column</th> 
      <th class="fixed">Fixed Column</th> 
      <th class="fluid">Third Column</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table>