HTML表 - 100％幅テーブル、固定幅の組み合わせとUNIFORM流体列

Question

私はあなたが別の日からタスクをドラッグアンドドロップすることができますHTMLとJavaScriptでカスタムカレンダーを構築しようとしています。私は最初の列と最後の2つの列を固定幅とし、残りの列（月曜日から金曜日まで）を流体が常に親の100％を占めるようにしたいと思います。私が午前

の問題は、流体TDの自動サイズ私は幅がサイズ変更し、別の列に1日からタスクをドラッグするとことを意味し、それらの中にあるどのくらいの内容に基づいて自分自身。私は月曜日から金曜日まで内容に関係なく、テキストオーバーフローを設定せずに正確に同じサイズにしたいと思います。 （タスクが常に可視である必要として）

すなわちIグレー列は関係なく内のコンテンツのそれぞれ、他と幅と赤色列流体が、均一に固定されたいです。

編集：私は（好ましくはないが）、ドラッグのためのjQueryを使用してJavaScriptのソリューションもOKになるような機能をドロップしています。

JSFiddle Live example

HTML：

<table> 
    <tr> 
    <th class="row_header">Row Header</th> 
    <th class="fluid">Mon</th> 
    <th class="fluid">Tue</th> 
    <th class="fluid">Wed</th> 
    <th class="fluid">Thurs</th> 
    <th class="fluid">Fri</th> 
    <th class="weekend">Sat</th> 
    <th class="weekend">Sun</th> 
    </tr> 
    <tr> 
    <td>Before Lunch</td> 
    <td>This col will be wider than the others because it has lots of content...</td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>But I would really like them to always be the same size!</td> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

CSS：あなたはおそらく

table { 
     width: 100%; 
    }  

    td, th { 
     border:1px solid black; 
    } 

    th { 
     font-weight:bold;    
     background:red; 
    } 

    .row_header { 
     width:50px; 
     background:#ccc; 
    } 

    .weekend { 
     width:100px; 
     background:#ccc; 
    } 

    .fluid { 
     ??? 
    } 

Answer 1

は（おそらくあまりにも定期的にJSで行うことができるが、私は仕事のこの種のためにそれを好む）：

（注：選択することが容易になりますので、私はIDを、テーブルを与えましたこの使用した唯一のCSSについてどのように）

$(function() { 
     var $my_table = $("#my_table") 
      ,current_width = $my_table.width() 
      ,fluid_columns = $("table .fluid") 
      ,spread_width = (current_width - 150)/fluid_columns.length; 

     fluid_columns.width(spread_width); 

     $(window).on("resize", function() { 
      current_width = $my_table.width(); 
      spread_width = (current_width - 150)/fluid_columns.length; 
      fluid_columns.width(spread_width); 
     }) 
    }); 

Answer 2

を行うことができます：

jQueryのを使用して210

.fluid { 
    width:10%; 
} 

Answer 3

をいじっのビットでそれなしで行うことができますか？

http://jsfiddle.net/T6YNK/16/

Answer 4

ダニー、

私は、これはあなたが探しているものだと思います。 Chromeでチェック

ここフィドルhttp://jsfiddle.net/T6YNK/22/

。

コード

   <table> 
     <tr> 
     <th class="row_header">Row Header</th> 
     <th class="fluid">Mon</th> 
     <th class="fluid">Tue</th> 
     <th class="fluid">Wed</th> 
     <th class="fluid">Thurs</th> 
     <th class="fluid">Fri</th> 
     <th class="weekend">Sat</th> 
     <th class="weekend">Sun</th> 
     </tr> 
     <tr> 
     <td>Before Lunch</td> 
     <td>This col will be wider than the others because it has lots of content...</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td>But I would really like them to always be the same size!</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     </tr> 
    </table> 

    <style type="text/css"> 

     table { 
      width: 100%; 
     }   

     td, th { 
      border:1px solid black; 
     } 

     th { 
      font-weight:bold;    
      background:red; 
     } 

     .row_header { 
      width:50px; 
      background:#ccc; 
     } 

     .weekend { 
      width:100px; 
      background:#ccc; 
     } 

     td, 
     th  { 
      overflow:hidden; 
     } 
    .fluid { 

} 
.weekend, 
.row_header{ 
width:50px !important; 

} 

table{ 
    border: 1px solid black; 
    table-layout: fixed; 
    width:100%; 

} 
    </style>​