3

div を使用してテーブルを作成しようとしています。テーブルは非常に長くする必要があるため、overflow auto/hidden を使用する必要があります。

これが結果ですhttp://jsfiddle.net/gj7vm/

問題は、div のタイトルを追加しようとすると.group、すべてが突然壊れることです ( http://jsfiddle.net/ata5U/1/ )。(各div には、テーブルと同様に他の div を含める必要がありますが、ここでは高さを固定する必要がある.group単純な div から始めています).title

これはどのように修正できますか？また、私が構築しようとしているものに似たもの (overflow:hidden/auto を含む長い html テーブル) の良い例はありますか?

4

1 に答える 1

3

divを使用してテーブルを作成しようとしている場合は、CSSテーブルの表示値を使用してみませんか？それらはあなたのdivをテーブルセルのように振る舞わせます。

CSSの例を次に示します。

div#screen {
  height: 120px;
  display: table;
}
#screen .row {
  display: table-row;
}
.group {
  width: 400px;
  height: 100px;
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
  display: table-cell;
}

そしてHTML：

<div id="screen" class="well well-large">
  <div class="row">
    <div class="group">
        <div class="group-title">foobar</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque.
    </div>
    <div class="group">
      <div class="group-title">foobar</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque.  </div>
    <div class="group">
      <div class="group-title">foobar</div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et diam risus. Proin eu pellentesque massa. Sed non turpis nunc, ultrices lacinia risus. Nunc et massa nec nulla commodo fermentum. Ut sit amet est id erat auctor pellentesque id non neque. Aliquam lacinia luctus condimentum. Phasellus fringilla metus at lectus auctor venenatis. Phasellus nec nulla at risus elementum feugiat ut sit amet tortor. Mauris egestas sapien non purus eleifend suscipit. Cras tortor metus, porta ac ultrices eget, sagittis a augue. Nullam facilisis, lacus iaculis condimentum placerat, mi metus pretium justo, a scelerisque enim felis id eros. Integer dictum, mi et posuere dapibus, risus ante ullamcorper tortor, sit amet adipiscing libero massa ut neque. 
    </div>
  </div>
</div>

これがフィドルです：http：//jsfiddle.net/8g8sW/1/

これらを使用する場合、オーバーフローは必要ありません。divはテーブルセルのように機能し、コンテンツに合わせて自動的に拡大されるため、autoです。

詳細については、http ：//www.vanseodesign.com/css/tables/をご覧ください。

CSSテーブルを使用したくない理由（ブラウザのサポートなど）がある場合は、そのように言ってください。ただし、CSSテーブルはこのための最も簡単で明白な選択のように思われました。

于 2013-03-23T17:50:46.940 に答える