1. ホーム
  2. twitter-bootstrap

[解決済み] Twitter ブートストラップ スクロール可能なテーブル

2022-04-26 01:53:22

質問

ホームページに表を表示させたいのですが、どうすればいいですか?問題は、このテーブルが約400行になることです。テーブルの高さを制限し、スクロールバーを適用するにはどうしたらよいでしょうか? これは私のコードです。

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

tableにmax-heightとfixed heightを適用してみましたが、うまくいきません。

どうすればいいですか?

Table要素は直接対応していないようです。divの中にテーブルを配置し、divの高さを設定し overflow: auto .