8

私のペン：

http://codepen.io/helloworld/pen/qHDFB

HTMLテーブルを作成したい：

  • 固定されたままのヘッダー付き
  • スクロールバーを表示するテーブル本体
  • 高さは固定ピクセルの高さではなく、100% の高さである必要があります。
  • ヘッダー セルは、行セルに揃える必要があります。column1がheader2の領域に水平に入るソリューションをよく見たので、これについて言及します。これは見栄えが悪いです。
  • 列の幅がパーセンテージでピクセルではなく、応答しない場合は問題ありません。
  • パフォーマンスは関係ありません。最大 16 行が表示されます。最大 7 列。

CSSだけ使いたい。

IE10+ および最新の FF/Chrome で動作するはずです。

-ms-grid などを使用して、Webkit などに移植される Microsoft の新しい CSS Grid Layout を使用することもできます。

上記の個々のサンプルを、ヘッダーが固定されたままで、テーブルの本体に html 本体ではなく垂直スクロールバーがあるようにするにはどうすればよいですか?

HTML

<table>
  <thead>
    <tr>
      <th>
        <div>First</div>
      </th>
      <th>
        <div>Second</div>
      </th>
      <th>
        <div>Third</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
    </tr>                  
  </tbody>
</table>

CSS

body, html{
  margin:0;
  padding:0;
  height:100%;
  width:100%;
}

table{
  width:100%;
  height:100%;
}

td{
  width:33%;
  border:black solid 1px;
}

tbody{
  overflow-x:hidden;
  overflow-y:auto;
}

tr td{
  text-align:center;
  height:100px;
}

th{
  background:lightgray;
  padding:10px;
  border:black solid 1px;
}
4

2 に答える 2

-1 
        <table>
            <thead>
                <tr>
                    <th>
                        <div>First</div>
                    </th>
                    <th>
                        <div>Second</div>
                    </th>
                    <th>
                        <div>Third</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Second</td>
                    <td>Third</td>
                </tr>                  
            </tbody>
        </table>
于 2015-06-29T08:09:04.287 に答える