1

データを含む大きな HTML テーブルがあります。データは、ヘッダー (列) と最初の列によって識別されます。コンテンツがスクロール可能である間、ヘッダーと最初の行をそのままにしたいと考えています。これらすべての「スクロール可能なテーブル」プラグイン (つまり、 http://www.tablefixedheader.com/demonstration/は機能しますが、適切にサイズ変更されません) が行うことと同様ですが、2 つの次元で行われます。Excel では、ペインを分割して固定することでこれを実現できます。

セルの幅/高さは動的です。

このようなものを実装しているサイトへのリンクを取得した場合も、ヒントをいただければ幸いです。

4

3 に答える 3

2

これは単なる好奇心によるものであり、これがあなたに合っているかどうかはわかりません-とにかく：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    table.sort_table {padding:0;margin:0;width:478px;font-size:12px;font-family:Arial, Helvetica, sans-serif;border-top:1px solid #ccc;border-left:1px solid #ccc;}
    table.sort_table tr td, table tr th {text-align:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;padding:4px;vertical-align:top;}
    table.sort_table tr.first_row td {color:red;}
    table.sort_table tr td.data_content {padding:0;}
    table.data_table {border:0;}
    table.data_table tr td {border-bottom:1px solid #ccc;border-right:1px solid #ccc;}
    table.data_table tr td.last {border-right:0;}
    table.data_table tr.last td {border-bottom:0;}
    .scroller {max-height:100px;overflow:auto;}
    .tdid {width:50px;}
    .tdname {width:200px;}
    .tdmail {width:200px;}
    </style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="sort_table">
    <tr>
        <th class="tdid">Id</th>
        <th class="tdname">Name</th>
        <th class="tdmail">Email</th>
    </tr>
    <tr class="first_row">
        <td>Uid</td>
        <td>User name</td>
        <td>User email</td>
    </tr>
    <tr>
    <td colspan="3" class="data_content">
        <div class="scroller">
        <table cellpadding="0" cellspacing="0" width="100%" class="data_table">
            <tr>
                <td class="tdid">Uid</td>
                <td class="tdname">User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td>Uid</td>
                <td>User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td class="tdid">Uid</td>
                <td class="tdname">User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td>Uid</td>
                <td>User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td class="tdid">Uid</td>
                <td class="tdname">User name</td>
                <td class="last">User email</td>
            </tr>
            <tr>
                <td>Uid</td>
                <td>User name</td>
                <td class="last">User email</td>
            </tr>            

                    </table>
        </div>
    </td>
    </tr>
</table>

</body>
</html>

トリックは、データ テーブルを並べ替えテーブル内にネストすることです。overflow:scroll または auto は td では機能しないため、オーバーフローが auto に設定された div を間に配置する必要があります。唯一の欠点は、td幅を固定する必要があることです。そうしないと、2 番目の表のセルがうまく整列しません。max-height を使用して data_content の高さを制限します (max-height を機能させるには ie6 の css 修正が必要ですが、実行可能であることに注意してください)。

ie7+ から動作し、時間があれば ie6 でも実行できます。

于 2011-03-14T13:12:18.373 に答える
0

これが役立つことを願っています。

これらの列クラスcol-xs-*は、テーブルの列に特定のディメンションを割り当てるためのブートストラップ ライブラリからのものです。

.table-scrollable thead {
  width: 97%;
}

.table-scrollable tbody {
  height: 200px;
  overflow-y: auto;
  width: 100%;
}

.table-scrollable thead,
.table-scrollable tbody,
.table-scrollable tr,
.table-scrollable td,
.table-scrollable th {
  display: block;
}

.table-scrollable tbody td,
.table-scrollable thead>tr>th {
  float: left;
  border-bottom-width: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<table class="table table-scrollable">
  <thead>
    <tr>
      <th class="col-xs-2">#</th>
      <th class="col-xs-8">Name</th>
      <th class="col-xs-2">Points</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col-xs-2">1</td>
      <td class="col-xs-8">Name1</td>
      <td class="col-xs-2">23</td>
    </tr>
    <tr>
      <td class="col-xs-2">2</td>
      <td class="col-xs-8">Name2</td>
      <td class="col-xs-2">44</td>
    </tr>
    <tr>
      <td class="col-xs-2">3</td>
      <td class="col-xs-8">Name2</td>
      <td class="col-xs-2">86</td>
    </tr>
    <tr>
      <td class="col-xs-2">4</td>
      <td class="col-xs-8">Name3</td>
      <td class="col-xs-2">23</td>
    </tr>
    <tr>
      <td class="col-xs-2">5</td>
      <td class="col-xs-8">Name4</td>
      <td class="col-xs-2">44</td>
    </tr>
    <tr>
      <td class="col-xs-2">6</td>
      <td class="col-xs-8">Name5</td>
      <td class="col-xs-2">26</td>
    </tr>
  </tbody>
</table>

于 2015-12-17T14:04:32.910 に答える