固定テーブルセル幅

多くの人々はまだコントロールやデータなどをレイアウトするためにテーブルを使用しています-これの一例は人気のあるjqGridです。しかし、私には理解できないようないくつかの魔法が起こっています（大声で叫ぶためのテーブル、どれほどの魔法が存在する可能性があるのでしょうか？）

どのようにしてテーブルの列幅を設定し、jqGridのようにすることができますか？これを複製しようとすると<td style='width: 20px'>、をすべて設定しても、これらのセルのいずれかのコンテンツが20pxを超えるとすぐに、セルが拡大します。

アイデアや洞察はありますか？

<col>すべての行にタグ管理テーブルのスタイルを使用することもできますがtable-layout:fixed、<table>またはテーブルのcssクラスに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; }

HTML5 / CSS3では、この問題に対するより良い解決策があります。私の意見では、この純粋な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でテーブルを設定する必要があります。それ以外の場合は機能しません。
また、vsyncが提案したCSS3の新機能は次のとおりword-break:break-all;です。これにより、スペースのない単語も複数行に分割されます。次のようにコードを変更するだけです。

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

最終結果

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

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

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

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

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

10x10

FULLSCREEN幅テーブルの場合：

• テーブルの幅は100％でなければなりません

• N列が必要な場合、THはN + 1でなければなりません

3列の例：

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }

  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

：first-child ...：nth-​​child（1）または...