Vertical scrollbar causing column width different between header and cell in spreadsheet

Vertical scrollbar causing column width different between header and cell in spreadsheet. This is a common issue when the HTML page that display on a computer. Whereas, it won't have issue if it is on Android or iOS because the scrollbar is floating on top of the content.

To explain this issue, let says we have a spreadsheet (or "table" view) built with DIV which looks like below:

<style>
.header {
  display:flex;
  flex-direction:row;
}

.item {
  display:flex;
  flex-direction:row;
}

.c1 {
  width:50%;
}

.item-list {
  overflow: hidden;
  overflow-y: scroll;
  height: 80px;
}
</style>

<div class="my-table">

<div class="header">
  <div class="c1">Date</div>
  <div class="c1">Ref #</div> 
</div> 
<div class="item-list">
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0001</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0002</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0003</div> 
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0004</div>
  </div>
  <div class="item">
    <div class="c1">1 Sep 2019</div>
    <div class="c1">0005</div>
  </div>
</div>
</div>


With the CSS for item-list, a vertical scrollbar will appear once the number of items increased.

The problem with this CSS is that the date and reference number column in the header will have a different width if you compared it with the column in the items.

To solve this, you need to use this style:

(1) you have to use "sticky:

.header{
  position: sticky;
  top: 0;
  left: 0;
  background-color: white;
}

(2) Move the overflow attribute for "item-list" to "my-table":

.my-table {
  position:relative;
  overflow: hidden;
  overflow-y: scroll;
  height: 80px;
}

And that solves the column width issue when there is a vertical scrollbar.

Fixed row and column in HTML with CSS + JavaScript

You cannot achieve the fixed row and column with HTML + CSS. You need the Javascript as well.






Below is the HTML, CSS and Javasript that accomplished the fixed row and column.

 <html lang="en">

<head>
    <script src="js/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        function on_y_scroll(e) {
            var t = $('.tb_cells').scrollTop();
            var l = $('.tb_cells').scrollLeft();

            $('.r_headers').scrollTop(t);
            $('.c_headers').scrollLeft(l);

            console.log('left=' + l.toString() + ',top=' + t.toString());
        }
        $(document).ready(function () {
            $('.tb_cells').scroll(on_y_scroll);
        });
    </script>

    <style>
        .tb {
            background-color: darkgray;
            width: 600px;
            height: 250px;
        }
      
        /* the full row and partial should be hidden */
        .max_row_width {
            width: 500px;
        }
        /* the data row to be partially display on the screen*/
        .max_data_width {
            width: 420px;
        }
        /* the data row height */
        .row_height {
            height: 30px;
        }
        /* the column header height */
        .row0_height{
            height:40px;
        }

        /* for column zero*/
        .cell0 {
            width: 100px;
            background-color: red;
        }

        .tb_col0 {
            float: left;
        }

        .r_headers {
            height: 140px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
            overflow: hidden;
        }

        .row_header {
            background-color: #0094ff;
        }

        /* for row zero */
        .c_headers {
            width: 400px;
            overflow: hidden;
        }

        .col_header {
            width: 100px;
            float: left;
            background-color: green;
            color: white;
        }

        .tb_row0 {
            clear: both;
        }

        /* for data cell */

        .tb_data {
            float: left;
            height: 200px;
            overflow: hidden;
            overflow-x: hidden;
            background-color: yellow;
        }

        .tb_cells {
            float: left;
            height: 160px; /*this is the height of 200px (tb_data.height) - 40 (cell0) - 20 (scrollbar) */
            overflow: hidden;
            overflow-y: auto;
            overflow-x: auto;
            background-color: mediumaquamarine;
        }

        .tb_row {
            clear: both;
        }

        .cell_col {
            width: 100px;
            float: left;

            /* user defined style for the cell content */
            box-sizing: border-box;
            padding-left: 5px;
            padding-right: 5px;
            text-overflow: clip;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <h3>Fixed row and column</h3>

    <div class="tb">

        <div class="tb_col0">
            <!--the first cell-->
            <div class="cell0 row0_height">
                cell 0
            </div>

            <!--the first column-->
            <div class="r_headers">
                <div class="row_header row_height">
                    r 1
                </div>
                <div class="row_header row_height">
                    r 2
                </div>
                <div class="row_header row_height">
                    r 3
                </div>
                <div class="row_header row_height">
                    r 4
                </div>
                <div class="row_header row_height">
                    r 5
                </div>
                <div class="row_header row_height">
                    r 6
                </div>
                <div class="row_header row_height">
                    r 7
                </div>

            </div>

        </div>



        <div class="tb_data max_data_width">

            <!--the column header -->

            <div class="c_headers row0_height">
                <div class="tb_row0 max_row_width row0_height">
                    <div class="col_header row0_height">
                        col 1
                    </div>
                    <div class="col_header row0_height">
                        col 2
                    </div>
                    <div class="col_header row0_height">
                        col 3
                    </div>
                    <div class="col_header row0_height">
                        col 4
                    </div>
                    <div class="col_header row0_height">
                        col 5
                    </div>
                </div>
            </div>


            <!-- data cells -->
            <div class="tb_cells max_data_width">

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell11 very long long long text
                    </div>
                    <div class="cell_col">
                        cell21
                    </div>
                    <div class="cell_col">
                        cell31
                    </div>
                    <div class="cell_col">
                        cell41
                    </div>
                    <div class="cell_col">
                        cell51
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell12
                    </div>
                    <div class="cell_col">
                        cell22
                    </div>
                    <div class="cell_col">
                        cell32
                    </div>
                    <div class="cell_col">
                        cell42
                    </div>
                    <div class="cell_col">
                        cell52
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell13
                    </div>
                    <div class="cell_col">
                        cell23
                    </div>
                    <div class="cell_col">
                        cell33
                    </div>
                    <div class="cell_col">
                        cell43
                    </div>
                    <div class="cell_col">
                        cell53
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell14
                    </div>
                    <div class="cell_col">
                        cell24
                    </div>
                    <div class="cell_col">
                        cell34
                    </div>
                    <div class="cell_col">
                        cell44
                    </div>
                    <div class="cell_col">
                        cell54
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell15
                    </div>
                    <div class="cell_col">
                        cell25
                    </div>
                    <div class="cell_col">
                        cell35
                    </div>
                    <div class="cell_col">
                        cell45
                    </div>
                    <div class="cell_col">
                        cell55
                    </div>
                </div>


                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell16
                    </div>
                    <div class="cell_col">
                        cell26
                    </div>
                    <div class="cell_col">
                        cell36
                    </div>
                    <div class="cell_col">
                        cell46
                    </div>
                    <div class="cell_col">
                        cell56
                    </div>
                </div>

                <div class="tb_row max_row_width row_height">
                    <div class="cell_col">
                        cell17
                    </div>
                    <div class="cell_col">
                        cell27
                    </div>
                    <div class="cell_col">
                        cell37
                    </div>
                    <div class="cell_col">
                        cell47
                    </div>
                    <div class="cell_col">
                        cell57
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

Multi-line items using UL & LI

You want to show the item list in a frame and each item has it's own frame as well. The end result looks like this:

The CSS to achieve the above:

• item_box - this is the class for the DIV. If the "overflow" setting is missing, the blue color DIV frame might not work in Firefox.
• item - this is the class for the UL.
• item li - this is the class for the LI.
• item span - this is the class for the SPAN (to control the text/content effect). If you are displaying the text with spaces, the spaces have to be replaced by "&nbsp;" so that it won't fall apart!

    <style type="text/css">
        .item_box
        {
            border: 1px solid blue;
            width: 400px;
            vertical-align: middle;
            overflow: hidden;
        }
        .item
        {
            list-style-type: none;
            min-height: 30px;
        }
        .item li
        {
            float: left;
            padding: 2px;
        }
        .item li span
        {
            border: 1px solid gray;
            display: inline-block;
            padding: 2px;
        }
    </style>