1

25 列のテーブルがあり、合計幅は約 2600px です。

現在、以下のような構造になっていますが、content領域外に流れており、各列の内容が正しく整列していません。実際、1 行に収まるはずのコンテンツが、各行の 2 または 3 行に表示されています。それは一般的にだらしないように見えます。

これは、Twitter Bootstrap が小さなデータ セット (特にテーブル) 向けに作成されたためだと思います。

しかし、このテーブルが扱いにくくないようにするにはどうすればよいかについて、誰かアイデアはありますか?

<div class="container-fluid">
        <div class="content">
           <div class="row-fluid">
            <div class="span12">

              <h2>Home</h2>

<table class="table table-striped table-hover table-condensed">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>Email</th>
      <th>Co. Name</th>
      <th>Co. Phone</th>
      <th>Co. Size</th>    
      <th>Co. Type</th>    
      <th>City</th>
      .
      .
      .    
    </tr>
  </thead>  

  <tr>
    <td>John F Kennedy</td>
    <td>87698765</td>
    <td>jfk@email.com</td>
     <!-- Begin Firm Info Here -->
        <td>Acme Inc</td>
        <td>(876) 987-6543</td>
       .
       .
       .
    </tr>
   </table>

      </div>
    </div>
  </div>
</div>

ありがとう！

4

1 に答える 1

8

改行を避けるには、使用できます

.the-table {
    white-space: nowrap;
    max-width: none;
    width: auto;
}

<table>これにより、コンテナー(またはコンテナーが展開できる場合はブラウザー) で水平スクロールが強制されます。したがって、そのレイアウトを制御したい場合は、 withと setを<table>内部に配置できます。追加のクラスで Bootstrap の「スパン」を使用できます。<div>overflow: autowidth

.the-container {
    overflow: auto;
    /* width cames from spanN class */
}
于 2012-09-11T07:48:46.913 に答える