0

この質問は、一部の人にとってはばかげているように見えるかもしれません。申し訳ありませんが、私はCSSに精通していません。

今、私は2つの列を持つテーブルを持っています(等しい必要があります)。表の幅は 100% になり、ページに合わせてサイズを変更する必要があります。

ヘッダー、いいですね。2 ～ 3 単語の 2 つのセルしか含まれていないため、問題はありません。

さて、次の各セルにはかなり大きなテキストが含まれているため、そのまま表示する必要があります (折り返しなし)。

私がしたこと：

<style>
.contentDiv
{
        display: inline-block;
        overflow-x:auto;
        overflow-y:hidden;
        white-space: nowrap;
        white-space: nowrap;
}
</style>

<table style="width:100%">
  <th>
    <tr><td with="50%">head 1</td><td width="50%">head 2</td></tr>
  </th>
  <tbody>
    <tr>
      <td><div class="contentDiv">big-text-here</div></td>
      <td><div class="contentDiv">big-text-here</div></td>
    </tr>
  </tbody>
</table>

肝心なのは、テーブルを全幅にし、内側のコンテンツセルをテーブル幅の半分にし、テキスト (どんなに大きくても) レイアウトを変更しないようにすることです (コンテンツが必要な表面よりも大きい)。

ありがとう！

4

2 に答える 2

0

これにより、ラッピングがなくなります。

td { position: relative; }
.contentDiv
{
    display: inline-block;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
    white-space: nowrap;
    position: absolute; 
}
于 2013-10-31T15:09:56.957 に答える
0

私はあなたが何を意味するのかちょっとわかりませんでしたが、あなたがこれを意味していると確信していますhttp://jsfiddle.net/mDXb5/また、上記のコードに編集する必要があるいくつかの問題がありました。例えば：

</table> tag is missing instead you use </tr> which is wrong
于 2013-10-31T15:20:22.473 に答える