103

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

また、position:fixed、absolute などの td 幅に対する影響がある場合、どのような影響がありますか? 修正よりも理由を探しています。それがどのように機能するかを理解したいと思っています。

td の幅が 300px ではありません

4

11 に答える 11

145

これは聞きたいことではないかもしれませんが、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。

于 2013-02-08T04:58:14.570 に答える
11

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

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

body {min-width:4150px;}

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

于 2013-02-08T04:46:48.887 に答える
8

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

たとえば、テーブルの幅を 5000px に設定しましたが、これは要件に合うと思いました。

table{
    width:5000px;
}

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

何が起こっているのかは、TD がデフォルトのテーブル幅をはるかに超えているためだと思います。各trで約45のtdを引き出すと（つまり、jsfiddleではなく、質問で提供したコード）、まったく問題なく動作します

于 2013-02-08T05:03:16.857 に答える
5

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

<table>
<thead>
<tr>
<td width="300">need 300px</td>
于 2013-02-08T04:46:46.860 に答える
5

使ってみて

table {
  table-layout: auto;
}

Bootstrap を使用する場合、クラスtableはtable-layout: fixed;デフォルトで持っています。

于 2014-08-14T17:52:44.273 に答える
4

私のクレイジーな解決策。）

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});
于 2014-02-18T13:39:13.423 に答える
1

以下も使用できます。

.rhead {
    width:300px;
}

しかし、これは一部のブラウザーでのみ機能します。正しく覚えていれば、IE8 ではこれが許可されません。何よりも、width=""属性<td>自体をそのまま入れた方が安全です。

于 2013-02-08T04:53:40.703 に答える