web-dev-qa-db-ja.com

テーブル列を最小幅にする方法

テンプレートデータファイルは次のとおりです。 https://github.com/Hoektronics/BotQueue/blob/master/views/bot/dashboard_list.ejs

テキストに基づいて、パディングと列ヘッダーを考慮して、テーブルの10列のうち8列を作成して、必要な最小幅のみを取得しようとしています。

サンプル画像では、4番目と9番目の列以外のすべてが最小幅を占めるようにします。技術的には、9つの列ヘッダーがあり、最後のヘッダーにはcolspanが2あります。最後のヘッダーはspan3です。必要な最小幅をパーセンテージ列で占め、残りをプログレスバーまたは合格/表示/不合格ボタンで占めたいです。

列4は、オーバーフローしたテキストを省略記号で置き換えるように設定されています。

サンプル画像： example image

htmlcsstwitter-bootstrap-2
27
jnesselr

一部のセルを非常に小さな幅に設定し、white-space: nowrapプロパティを適用するというトリックがあります。

<table>
    <tr>
        <td class="min">id</td>
        <td class="min">tiny</td>
        <td>Fills space</td>
        <td>Fills space</td>
        <td class="min">123</td>
        <td class="min">small</td>
        <td>Fills space, wider</td>
        <td>Fills space</td>
        <td class="min">thin</td>
    </tr>
</table>

td {
    width: auto;
}

td.min {
    width: 1%;
    white-space: nowrap;
}

ライブデモ

上記のフィドルでもわかるように、nowrapはテーブルセルに強制的に改行を防止し、幅を可能な限り小さくします。

注：theadがある場合は、tdのスタイリングをthにも適用します。

更新＃1：省略記号（...）

長い列を自動的に楕円に折りたたむには、 text-overflow: Ellipsis が探しているものです。

td.cell-collapse {
    max-width: 200px;
    overflow: hidden;
    text-overflow: Ellipsis;
}

ライブデモ

これには、overflowをhiddenに設定し、widthまたはmax-widthに固定値を設定する必要もあります。幅を制限するセルにcell-collapseクラスを追加します。

更新＃2：ブートストラップの処理

Bootstrapのtableクラスは、このアプローチを台無しにするwidth: 100%;を設定します。 table { width: inherit !important; }で修正できます

ライブデモ

注：テーブルセルには既にwidth: auto;があるため、このアプローチのテーブルは既に全幅になっています。

純粋なCSSベースのアプローチが現在のすべてのブラウザーで一貫して機能するようになったため、以前のJavascriptベースのソリューションは削除されました。元のコードは、リンクされた JSfiddle で引き続き利用でき、コメントアウトされています。

48
John Weisz

列に必要なサイズがわかっていて、それらが固定されている場合は、固定テーブルレイアウトを使用することをお勧めします。各列がとる固定％を指定できます。

同様の状況で私を助けたリンクはここにあります http://css-tricks.com/fixing-tables-long-strings/

1
Vall3y