Geek asks and answers

Two-dimensional scrolling table

I have a large HTML table that contains data. The data is identified by the heading (columns) and the first column. We would like the title AND the first line to remain while the content scrolls. Like what all these plugins with a scrolling table do (i.e. http://www.tablefixedheader.com/demonstration/ , which works, but don't change correctly) do ... but in two dimensions. In Excel, this can be achieved by splitting and fixing panels.

The width / height of the cells is dynamic.

Any hints are also welcome if you get a link to a site that implements something like this.

+1
source share
2 answers

, , - :

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

, . : td, div , auto inbetween. , td , . , data_content ( , css fix ie6, max-height, ).

ie7 + on, ie6 .

+1

, .

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

col-xs-* , .

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;
}
0

More articles:


All Articles