web-dev-qa-db-ja.com

HTMLテーブルで<td>を取得してコンテンツに合わせ、特定の<td>で残りを埋める方法

これは架空の例です。

table, thead, tbody, tr { width: 100%; }
    table { table-layout: fixed }
    table > thead > tr > th { width: auto; }
<table>
      <thead>
        <tr>
          <th>Column A</th>
          <th>Column B</th>
          <th>Column C</th>
          <th class="absorbing-column">Column D</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data A.1 lorem</td>
          <td>Data B.1 ip</td>
          <td>Data C.1 sum l</td>
          <td>Data D.1</td>
        </tr>
        <tr>
          <td>Data A.2 ipsum</td>
          <td>Data B.2 lorem</td>
          <td>Data C.2 some data</td>
          <td>Data D.2 a long line of text that is long</td>
        </tr>
        <tr>
          <td>Data A.3</td>
          <td>Data B.3</td>
          <td>Data C.3</td>
          <td>Data D.3</td>
        </tr>
      </tbody>
    </table>

コンテンツサイズに合わせてすべての列の幅を確保し、「absorbing-column」クラスを使用して、残りのスペースを1列に残して、次のようにします。

| HTML                                                                   | 100%
| body                                                                   | 100%
| table                                                                  | 100%
|------------------------------------------------------------------------|
| Column A | Column B       | Column C | Column D                        |
|------------------------------------------------------------------------|
| Column A | Column B lorem | Column C | Column D                        |
| Column A | Column B       | Column C | Column D                        |
| Column A | Column B       | Column C | Column D                        |
|------------------------------------------------------------------------|

ご覧のとおり、列Bは最初の行の余分なデータのために他の列より少し大きくなっていますが、列Dは常に残りのスペースを使い果たします。

Max-width、min-width、autoなどで遊んでみましたが、この機能を実現する方法がわかりませんでした。

言い換えれば、すべての列に必要な幅以上を必要とせず、列Dに100％幅のテーブル内の残りのスペースをすべて使用させます。

htmlcsshtml-tablewidth
43
user2985898

.absorbing-columnの幅を定義する

table-layoutをautoに設定し、.absorbing-columnに極端な幅を定義します。

ここでwidthを100%に設定しました。これは、この列が許可された最大量のスペースを取ることを保証する一方で、幅が定義されていない列はコンテンツに合わせて縮小され、それ以上は縮小されないためです。

これは、テーブルの動作の風変わりな利点の1つです。 table-layout: autoアルゴリズムは数学的に許容されます。

すべてのtd要素にmin-widthを定義して、要素が狭くなりすぎず、テーブルが適切に動作するのを防ぐこともできます。

table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
}
table td {
    border: 1px solid #ccc;
}
table .absorbing-column {
    width: 100%;
}
<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>
61
gfullam

デモ- http://jsfiddle.net/victor_007/ywevz8ra/

見やすくするために境界線を追加（テスト）

white-space に関する詳細情報

table{
    width:100%;
}
table td{
    white-space: nowrap;  /** added **/
}
table td:last-child{
    width:100%;
}

    table {
      width: 100%;
    }
    table td {
      white-space: nowrap;
    }
    table td:last-child {
      width: 100%;
    }
<table border="1">
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th class="absorbing-column">Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data</td>
      <td>Data D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>
24
Vitorino fernandes

私が見つけたすべての仕様に従って、CSS幅を要素の1％または100％に設定することは、親に関連しています。執筆時点でBlink Rendering Engine（Chrome）とGecko（Firefox）はその1％または100％をうまく処理しているようです（列を縮小したり、使用可能なスペースを埋めるために列を作成しています）が、すべてのCSS仕様に従って保証されているわけではありません適切にレンダリングすることができました。

1つのオプションは、テーブルをCSS4 flex divに置き換えることです。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

これは新しいブラウザ、つまりIE11 +で機能します。記事の下部にある表をご覧ください。

1
Mladen Adamovic