6

プロジェクトでは、特定の幅の列を含むテーブルを、テーブル行ごとに 1 つの HTML 行 (折り返しなし) でレンダリングする必要がありました。各テーブル セルには、上下に 1 ピクセル、左右に 2 ピクセルのパディングが必要です。クロスブラウザで動作することを思い付くことができる最良の方法は、次のように、テーブル内の td 内に div を配置することです。

<style>
  table.grid { border: none; border-collapse: collapse; }
  table.grid tbody tr td { padding: 1px 2px; }
  table.grid tbody tr td div { overflow: hidden; white-space: nowrap; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><div>One</div></td>
      <td class="two"><div>Two</div></td>
    </tr>
    <tr>
      <td class="one"><div>Another One</div></td>
      <td class="two"><div>Another Two</div></td>
    </tr>
  </tbody>
</table>

余分な div を追加する必要をなくしたいと考えています。この問題をグーグルで検索するのに何時間も費やしましたが、代替手段が見つかりません。

余分な div を追加せずに必要なことを行う方法はありますか? もしそうなら、それは何ですか?

テーブルをまったく使用せずに目的の結果を得る方法はありますか?

4

4 に答える 4

4

残念ながら、テーブル要素はオーバーフローを考慮しないため、それを子要素に適用する必要があります。

編集：FFを使用してこの効果を作成でき、IEで機能する可能性があることmax-widthを発見したため、話が早すぎた可能性があります。あなたは毎日何かを学びます。

edit2:ええ、少なくともIE7では機能しますが、テキストに空白を含めることはできないという重大な警告があります.空白をに変換する必要があります&nbsp;. <div>清潔さと互換性のために、おそらくこのソリューションに固執する必要があると思います。

于 2009-01-06T13:11:39.623 に答える
0

実際、できます。

通常、テーブルは必要なスペースを占有します。100% の幅を指定するtableと、100% の幅が使用され、内容に関してセル間で共有されます。

テーブルには空き領域がありません。ある時点で、他のセルのサイズが設定されると、残りの領域を占有するセルが存在する必要があります。

セルの幅を設定するには、 awidthと amax-widthを同じサイズにする必要があります。N 列のテーブルの場合、N-1 列に対してそれを行うことができ、最後の列が残りのスペースを取ります。

これを N-2 列に行うと、固定されていない 2 つの列が残りのスペースを共有します。

white-space:no-wrapこれで、必要に応じてand/orを追加できtext-overflow:ellipsisます。

画像の例を次に示します (私の RSS リーダー): https://i.stack.imgur.com/bPpKP.png

実際の例: https://codepen.io/lehollandaisvolant/pen/REVNLy?editors=1100

実際に驚くほど強力であることがわかります。コードペンでは、次のことがわかります。

  • 一部のセルは固定幅です
  • 一部のセルは、含まれるテキストに適合します
  • 一部のセルはコンテナに適合します

また、各セルの動作を決定できます (コンテナーに収まるセルが 1 つある場合)。

于 2018-12-22T20:08:10.247 に答える
-1

各テーブル セル内に div をネストする必要はありません。以下は同じ効果を達成するはずです。

<style>
  table.grid { border-collapse: collapse; }
  table.grid tbody tr td { overflow: hidden; white-space: nowrap; padding: 1px 2px; }
  table.grid tbody tr td.one { width: 100px; }
  table.grid tbody tr td.two { width: 200px; }
</style>
<table class="grid">
  <tbody>
    <tr>
      <td class="one"><span>One</span></td>
      <td class="two"><span>Two</span></td>
    </tr>
    <tr>
      <td class="one"><span>Another One</span></td>
      <td class="two"><span>Another Two</span></td>
    </tr>
  </tbody>
</table>
于 2009-01-06T13:08:28.117 に答える
-3

table を div に単純に置き換えることもできます。

次に、CSS で列幅を定義する必要があります (これは、すべてのブラウザーで機能させるのが難しい場合があります)。

例: コードは次のようになります。

<div class="mainBoxOfTable">
    <div class="Line">
      <div class="ColumnOne">One</div>
      <div class="ColumnTwo">Two</div>
    </div>
    <div class="Line">
      <div class="ColumnOne">another One</div>
      <div class="ColumnTwo">another Two</div>
    </div>
 </div>
于 2009-01-29T15:31:47.363 に答える