3列の表。固定列の幅。他の2つの列に幅を共有する方法は？

Question

私は3列の100％幅のテーブルを持っています。中央の列は600ピクセル幅である必要があります。残りのスペースを使い切っている間に、他の2つの幅をどのように等しくすることができますか？

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

現在のところ、左右の列の内容によっては、それらは常に不均一です。私は左と右だけでなく、他の数と最小幅の試行で50％の幅を設定しようとしました。

jquery/javascriptを使用しないでください。ありがとうございました

Answer 1

センターの列で使用される "align = center"はお勧めします。

Answer 2

「colgroup」タグを使用すると、これに大きな助けになる可能性があります。

<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

この古い質問に対する新しい回答。

1. は真ん中の列thmax-widthとmin-widthの代わりwidth
2. 左右thwidth50%のを付けを与えます。
3. tableをwidthに指定しないでください。

この例の中間列widthを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>