web-dev-qa-db-ja.com

固定テーブルセル幅

多くの人がまだテーブルをレイアウトコントロール、データなどに使用しています。その一例が人気のあるjqGridです。しかし、私が想像できないようなマジックがいくつか起こっています（大声で叫ぶための表、どれくらいのマジックがあり得るのでしょうか？）

JqGridのようにテーブルの列幅を設定してそれに従うことはどうすれば可能ですか。これを複製しようとすると、すべての<td style='width: 20px'>を設定しても、それらのセルの1つの内容が20pxを超えるとすぐに、セルは拡大します。

何かアイデアや洞察？

htmlcsslayouthtml-table
156
Jimbo

すべての行に<col>タグ管理テーブルスタイルを使用することもできますが、table-layout:fixedクラスまたはtables cssクラスに<table>スタイルを設定し、セルにoverflowスタイルを設定する必要があります。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

これがあなたのCSSになります

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
231
hunter

HTML 5/CSS 3では、この問題に対するより良い解決策が得られました。私の意見では、この純粋なCSSソリューションが推奨されています。

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

あなたはテーブルのwidthを haunterの解 でも設定する必要があります。さもなければそれは働かない。
vsync が提案した新しいCSS3の機能は、Word-break:break-all;です。これにより、スペースのない単語も複数行に分割されます。このようにコードを修正するだけです。

table.fixed { table-layout:fixed; width:90px; Word-break:break-all;}

最終結果

Rendered table

89
totymedli
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  Word-wrap:break-Word;
}
12
ajreal

私は1つの長いテーブルtdセルを持っていました、これはブラウザの端にテーブルを強制して、見苦しく見えました。その列を固定サイズのみにして、指定された幅に達すると単語を分割したいだけでした。だからこれは私のためにうまくいきました：

<td><div style='width: 150px;'>Text to break here</div></td>

あなたはtable、tr要素にどんな種類のスタイルも指定する必要はありません。 overflow：hiddenを使うこともできます。他の答えで示唆されているように、それは余分なテキストが消えるのを引き起こします。

11
Tarik
table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10×10

0
user1993774