CSSを使用して、ワードラッピングなしで特定の幅のテーブルセルを作成する

Question

プロジェクトに関与しているのは、特定の幅の列を持つ表を表の行ごとに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を追加することなく、必要なことを行う方法はありますか？もしそうなら、それは何ですか？

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

Answer 1

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

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

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

Answer 2

実際には、できる。

通常、テーブルは必要なスペースを占有します。 tableに100％の幅を指定すると、withと共有の100％がセル間でかかり、コンテンツに関して。

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

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

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

これをすべて用意して、必要に応じてwhite-space:no-wrapおよび/またはtext-overflow:ellipsisを追加できます。

画像の例（私のRSSリーダー）<！> nbsp ;: https：/ /i.stack.imgur.com/bPpKP.png

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

あなたはそれが実際に驚くほど強力であることを見ることができます<！>＃8217; codepenで次を確認できます。

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

そして、各セルの動作を決定できます（コンテナに適合するセルが1つある限り）

Answer 3

各テーブルセル内に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>

Answer 4

テーブルを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>