CSSのtd幅の絶対位置を使用

こちらのJSFIDDLEをご覧ください

td.rhead { width: 300px; }

CSS幅が機能しないのはなぜですか？

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

また、位置の効果は何ですか？修正よりも理由を探しています。それがどのように機能するかを理解したいと思っています。

これはあなたが聞きたいことではないかもしれませんが、display: table-cell幅を尊重せず、テーブル全体の幅に基づいて折りたたまれます。display: block指定した幅の要素をテーブルセル自体の内部に置くだけで、これを簡単に回避できます。

<td><div style="width: 300px;">wide</div></td>

セルの位置はすべてテーブルに対して静的であるため、<table>それ自体がposition: fixed絶対であるか絶対である場合でも、大きな違いはありません。

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

編集：私は信用することはできませんが、コメントが言うように、あなたはmin-width代わりにwidthテーブルセルの代わりに使用することができます。

あなたは使う方が良いです table-layout: fixed

Autoがデフォルト値であり、大きなテーブルでは、ブラウザがすべてのサイズが適切かどうかを確認するために反復するため、クライアント側に多少の遅延が発生する可能性があります。

修正済みの方がはるかに優れており、ページにすばやくレンダリングされます。テーブルの構造は、テーブルの全幅と各列の幅に依存します。

ここでは、元の例に適用されます。JSFIDDLE、残りの列が押しつぶされて内容が重なっていることに注意してください。これをもう少しCSSで修正できます（最初のTRにクラスを追加するだけです）。

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

ここで実際に見られる：JSFIDDLE

提供されたリンクで機能しない理由は、300pxの列と52の列をそれぞれ7列に表示しようとしているためです。列の数を縮小すると機能します。画面にその多くを収めることはできません。

列を強制的にフィットさせたい場合は、次の設定を試してください。

body {min-width:4150px;}

私のjsfiddleを参照してください：http: //jsfiddle.net/Mkq8L/6/ @mikeまだコメントできません。

その理由は、テーブルの幅を指定しておらず、tdの束全体がオーバーフローしているためです。

これは、たとえば、私はテーブルに5000pxの幅を与えました、私はあなたの要件に合うと思いました。

table{
    width:5000px;
}

これは、提供したコードとまったく同じで、テーブルの幅に追加しただけです。

私はあなたのTDがデフォルトのテーブル幅をはるかに超えているので、何が起こっていると思います。各trで約45のtd（つまり、jsfiddleではなく質問で提供したコード）を引き出した場合、それは正確に機能します。

これを試してみてください。

<table>
<thead>
<tr>
<td width="300">need 300px</td>

使ってみる

table {
  table-layout: auto;
}

Bootstrapを使用する場合、デフォルトでクラスにtableありtable-layout: fixed;ます。

table-layoutプロパティとテーブルの「固定」値を使用します。

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

テーブルの幅全体を設定した後、tdの幅で％を設定できます。

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

詳細については、次のリンクをご覧ください。http：//www.w3schools.com/cssref/pr_tab_table-layout.asp

私のクレイジーなソリューションです。）

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

テーブルの幅がたとえば100％の場合、tdに20％などのパーセント幅を使用してみてください。

divの最初のセルのコンテンツをラップします。例：

HTML：

<td><div class="rhead">a little space</div></td>

CSS：

.rhead {
  width: 300px;
}

これがjsfiddleです。

次のものも使用できます。

.rhead {
    width:300px;
}

しかし、これは一部のブラウザーでのみ発生します。私が正しく覚えている場合、IE8はこれを許可しません。全体として、width=""属性を<td>それ自体の中に置くだけの方が安全です。