CODEWITHSUNDEEP
javascripthtmlcsshtml-tablescrollable
Pascal
Pascal

Reputation: 8637

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.

Upvotes: 1

Views: 2061

Answers (3)

WitVault
WitVault

Reputation: 24130

I hope this helps.

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

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

Upvotes: 0

easwee
easwee

Reputation: 15905

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.

Upvotes: 2

Tyler Albert
Tyler Albert

Reputation: 1

If you have enough data, you'll need some sort of recycling mechanism to keep the browser running smoothly. Too many elements on the page will make the browser slow and potentially crash (I was having trouble with a 1000 x 1000 table, e.g. 1 million cells). I've made a repo here in vanilla js with a baseline approach for a 2 dimensional scrolling table (akin to a heatmap).

This also works with diagonal scrolling, where you click your mouse wheel and drag.

2D scrollable table (e.g. heatmap)

Upvotes: 0

Related Questions