Two dimensional scrollable table

问题

I have a big HTML table which contains data. The data is identified by the header (columns) and the first column. We would like the header AND the first row to stay while the content is scrollable. Similar to what all those "scrollable table" plugins (i.e. http://www.tablefixedheader.com/demonstration/ which kind of works but does not resize properly) do... but on two dimensions. In Excel this can be achieved by splitting and fixing the panes.

The width/heights of the cells are dynamic.

Any hints are appreciated also if you got a link to a site which implements something like this.

回答1:

This is a take just out of curiosity and I'm not sure this will fit you - anyway:

<!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>

The trick is to nest the data table inside the sort table. Since overflow:scroll or auto won't work on td you have to put a div with overflow set to auto inbetween. Only drawback is that you will have to make the td width fixed or else the second table cells won't align nicely. It uses than max-height to limit the data_content height (note you will need css fix for ie6 to make max-height work but can be done).

Works from ie7+ on and if I had time could do it for ie6 too.

回答2:

I hope this helps.

<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>

These column classes col-xs-* are from bootstrap library to assign certain dimension to the table columns.

This is corresponding css-style

.table-scrollable thead {
  width: 97%;
}
.table-scrollable tbody {
  height: 230px;
  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;
}

来源：https://stackoverflow.com/questions/5297306/two-dimensional-scrollable-table

标签

javascript

html

css

html-table

scrollable