2

4列のテーブルがあります。最初の 1 つは 5% 固定、次の 3 つは 20% 固定にしたいです。したがって、最後の 3 つが常に同じ幅であることを確認するために、使用してtable-layout:fixedいる . ただし、これにより、最初の td が最後の 3 列と同じ幅になります。

ここに私のHTMLがあります：

<tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{CO}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>

そして私のCSS：

.creatorOptionsTable {border-collapse: collapse; width: 80%; table-layout: fixed;}
.creatorOptionsTable tr {border-bottom: 1px solid black;}
.creatorOptionsTable td {padding: 5px 3%; width: 20%; border-left: 1px solid black;    word-wrap: break-word}
 .creatorOptionsTable td.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important;  text-align: center; border-left: none;}

注意してください、私は<table>これにタグを含めていないことを認識しています. しかし、それはそこにあります。

これは簡単なはずですが、うまくいきません。

ここに私のコード全体があります：

 <table id="creatorOptionsAddTable" class="creatorOptionsTable">
<tr class="firstRow">
    <th clas="groupsOptionsCheckboxCell"></th>
    <th>Component</th>
    <th>Description</th>
    <th>Panel</th>
</tr>
 <tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{COMPONET_DESCRIPTION}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>
</table>
4

5 に答える 5

1

ああ、あなたはあなたが書いたものをあなたの th タグで愚かな間違いチェックをしています

<th clas="groupsOptionsCheckboxCell"></th>

あなたはそれが正しいと思いますか。

于 2012-07-27T04:41:45.573 に答える
1

それはうまくいくはずです。それはあなたのHTMLのすべてではありませんよね？テーブルクラスも必ず宣言してください。HTML サンプル全体を考慮してコードを編集しました。問題は、宣言された ths の CSS ルールがないため、tds の幅に影響を与えていたことです。jsfiddle (http://jsfiddle.net/QWsZT/2/) では問題なく動作しますが、それでも動作しない場合はお知らせください。

HTML:

<table id="creatorOptionsAddTable" class="creatorOptionsTable">
<tr class="firstRow">
    <th class="groupsOptionsCheckboxCell"></th>
    <th>Component</th>
    <th>Description</th>
    <th>Panel</th>
</tr>
 <tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{COMPONET_DESCRIPTION}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>
</table>

CSS:

.creatorOptionsTable {border-collapse: collapse; width: 80%; table-layout: fixed;}
.creatorOptionsTable tr {border-top: 1px solid black;}
.creatorOptionsTable tr.firstRow {border-top: none;}
.creatorOptionsTable td {padding: 5px 3%; width: 20%; border-left: 1px solid black; word-wrap: break-word}
.creatorOptionsTable td.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important;  text-align: center; border-left: none;}
.creatorOptionsTable th {padding: 5px 3%; width: 20%; border-left: 1px solid black; word-wrap: break-word}
.creatorOptionsTable th.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important;  text-align: center; border-left: none;}
于 2012-07-27T02:23:44.120 に答える
1

まず、あなたはこれが何を意味するのか誤解しています:

.creatorOptionsTable { width: 80%; }

これにより、テーブル要素が親要素の 80% に設定されます。したがって、親が 1000px の場合、これはブラウザーに「このテーブルを 800px にします」と指示することになります。次に、列の幅を注文します。

次に、各列の幅を設定する場合は、100% にする必要があります。ブラウザーは、合計が 100% に満たないすべての列を考慮することはできません。ピザは 8 切れあります。ジョーは 1 枚、ジョンは 2 枚、サムは 2 枚、スティーブは 2 枚食べました。

1 つの列を他の 3 つの列の 1/4 にしたい場合は、それを理解してください。約 8%、および 30%、31%、31% (または単に 10、30、30、30 を実行) にする必要があります。または、3 つの幅を同じに設定するだけで、残りのスペースを狭くすることができます。

于 2012-07-27T11:14:23.310 に答える
1

ああ！見つけた。table-layout: fixed を使用する前に、これをここに持っていました:

.creatorOptionsTable {width: 80%;}

それを取り出すと、修正されます。とにかく助けてくれてありがとう！

于 2012-07-27T02:41:39.560 に答える
0

の一般的な幅を に設定してtdで30px固定しmax-width、残りの 3 ～ 20% の幅を繰り返しで設定します+td( td+td2 番目td以降、td+td+td3 番目以降などを意味tdします)。

/*Set first (general) width fixed*/
.creatorOptionsTable td {
    width: 30px;
    max-width: 30px;
}
/*Set recurring cells' width 20%*/
.creatorOptionsTable td+td {
    width: 20%;
}

また、テーブルをdiv幅 80% の 内に配置し、テーブルの幅を に設定します100%。

div.container {
    max-width: 80%;
}
.creatorOptionsTable {
    width: 100%;
    word-wrap: break-word;
}
于 2012-07-27T11:20:41.060 に答える