How to have the first column fixed and the rest of the columns to scroll horizontally

Question

I am able to add the scrollbar, but the problem I am facing is that when the header is too big, the header overflows and is not breaking down. I want the header text to break down to next line and the rest of the columns should take the same height as the header.

HTML:

<div id="outerdiv">
    <div id="innerdiv">
        <table>
            <tr>
                <td class="headcol">Big Rowwwww1</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">2</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">3</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">4</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">5</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">6</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">7</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">8</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
            <tr>
                <td class="headcol">9</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
                <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            </tr>
        </table>
    </div>
</div>

CSS:

 body {
        font:16px Calibri;
    }
    table {
        border-collapse:separate;
        border-top: 3px solid grey;
    }
    td {
        margin:0;
        border:3px solid grey;
        border-top-width:0px;
        white-space:nowrap;
    }
    #outerdiv {
        position: absolute;
        top: 0;
        left: 0;
        right: 5em;
    }
    #innerdiv {
        width: 100%;
        overflow-x:scroll;
        margin-left: 5em;
        overflow-y:visible;
        padding-bottom:1px;
    }
    .headcol {
        position:absolute;
        width:5em;
        left:0;
        top:auto;
        border-right: 0px none black;
        border-top-width:3px;
        /*only relevant for first row*/
        margin-top:-3px;
        /*compensate for top border*/
    }
    .headcol:before {
        content:'Row ';
    }
    .long {
        background:yellow;
        letter-spacing:1em;
    }

The current working code is below in the fiddle link http://jsfiddle.net/DYgD6/693/

Here is a solution: [bootstrap 3 responsive table with fixed first column](http://stackoverflow.com/questions/19737306/bootstrap-3-responsive-table-with-fixed-first-column) — Emilio Duarte, Jul 01 '16 at 05:21

score 0 · Answer 1 · edited Dec 17 '17 at 14:07

body {
  font: 16 px Calibri;
}
table {
  border - collapse: separate;
  border - top: 3 px solid grey;
}
td {
  margin: 0;
  border: 3 px solid grey;
  border - top - width: 0 px;
  /*white-space:nowrap;*/
  height: 80 px;
}#
outerdiv {
  position: absolute;
  top: 0;
  left: 0;
  right: 5e m;
}#
innerdiv {
  width: 100 % ;
  overflow - x: scroll;
  margin - left: 5e m;
  overflow - y: visible;
  padding - bottom: 1 px;
}
.headcol {
  position: absolute;
  width: 5e m;
  left: 0;
  top: auto;
  border - right: 0 px none black;
  border - top - width: 3 px;
  /*only relevant for first row*/
  margin - top: -3 px;
  /*compensate for top border*/
  word - wrap: break -word;
}
.headcol: before {
  content: 'Row ';
}
.long {
  background: yellow;
  letter - spacing: 1e m;
}

<div id="outerdiv">
   <div id="innerdiv">
      <table>
         <tr>
            <td class="headcol">Big Rowwwww1</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
         <tr>
            <td class="headcol">2</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
         <tr>
            <td class="headcol">3</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
         <tr>
            <td class="headcol">4</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
         <tr>
            <td class="headcol">5</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
         <tr>
            <td class="headcol">6</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
         <tr>
            <td class="headcol">7</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
         <tr>
            <td class="headcol">8</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
         <tr>
            <td class="headcol">9</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
            <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
         </tr>
      </table>
   </div>
</div>

I have done few changes in your existing css, please look into the same and try this:

        body {
        font:16px Calibri;
    }
    table {
        border-collapse:separate;
        border-top: 3px solid grey;
    }
    td {
        margin:0;
        border:3px solid grey;
        border-top-width:0px;
        /*white-space:nowrap;*/
        height:80px;
    }
    #outerdiv {
        position: absolute;
        top: 0;
        left: 0;
        right: 5em;
    }
    #innerdiv {
        width: 100%;
        overflow-x:scroll;
        margin-left: 5em;
        overflow-y:visible;
        padding-bottom:1px;
    }
    .headcol {
        position:absolute;
        width:5em;
        left:0;
        top:auto;
        border-right: 0px none black;
        border-top-width:3px;
        /*only relevant for first row*/
        margin-top:-3px;
        /*compensate for top border*/
        word-wrap: break-word;
    }
    .headcol:before {
        content:'Row ';
    }
    .long {
        background:yellow;
        letter-spacing:1em;
    }

Thank you. But i think the height should not be fixed. I want the height to update automatically to the highest height in the row. Can't we do that? — Radha, Jul 01 '16 at 06:40
As far as I know, you can't get the desired output if you used .headcol { position:absolute;}. once you will use position: relative; it will work. but that will violate your other required functionality. sorry :( — Anubhav Tiwari, Jul 01 '16 at 08:44

How to have the first column fixed and the rest of the columns to scroll horizontally

1 Answers1