1

This question makes me feel like it's a duplicate, but after going through multiple related threads I have realised... I have gone through most related threads (fixed columns) regarding my requirement, and after following the answers I'm faced with some text overlapping issues like below...

text_overlapping_issue

I am trying to achieve something like make the first three columns with headings of a html table to be fixed, and all other columns could be scroll-able.

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td,
        th {
            text-align: left;
            padding: 5px;
            word-wrap: break-word;
        }

        th {
            background: #444;
            color: white;
        }

        td.width100px div,
        th.width100px div {
            width: 100px;
        }

        td.width86px div,
        th.width86px div {
            width: 86px;
        }

        td.width120px div,
        th.width120px div {
            width: 120px;
        }

        td.width150px div,
        th.width150px div {
            width: 150px;
        }

        td div {
            word-break: break-all !important;
        }

        tr:nth-child(even) {
            background: #eee;
        }

        #main_container {
            padding: 10px;
            overflow: auto;
            margin: 5px;
            border: solid 2px darkgrey;
        }
    </style>
</head>

<body>

    <div id="main_container">
        <div style="padding: 5px 0 0 5px;z-index:1;width: 150px;position:sticky;left:0;top:0;margin-bottom: 5px;font-weight: 600;">2020-12-29</div>
        <div style="width:100%">
            <table style="width:100%">
                <tr>
                    <th class="width100px">
                        <div>EmpName</div>
                    </th>
                    <th class="width86px">
                        <div>EmpIdD</div>
                    </th>
                    <th class="width100px">
                        <div>MTN</div>
                    </th>
                    <th class="width120px">
                        <div>WorkingTime</div>
                    </th>
                    <th class="width86px">
                        <div>StartTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                    <th class="width86px">
                        <div>LunchTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                    <th class="width86px">
                        <div>EndTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                </tr>
                <tr>
                    <td class="width100px">
                        <div>William Reehil</div>
                    </td>
                    <td class="width86px">
                        <div>12345</div>
                    </td>
                    <td class="width100px">
                        <div>91657897698</div>
                    </td>
                    <td class="width120px">
                        <div>09:00-17:00</div>
                    </td>
                    <td class="width86px">
                        <div>10:30</div>
                    </td>
                    <td class="width150px">
                        <div>13th Street. 47 W 13th St, New York, NY 10011, USA</div>
                    </td>
                    <td class="width86px">
                        <div>13:00</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>16:50</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                </tr>
                <tr>
                    <td class="width100px">
                        <div>William Reehil</div>
                    </td>
                    <td class="width86px">
                        <div>12345</div>
                    </td>
                    <td class="width100px">
                        <div>91657897698</div>
                    </td>
                    <td class="width120px">
                        <div>09:00-17:00</div>
                    </td>
                    <td class="width86px">
                        <div>10:30</div>
                    </td>
                    <td class="width150px">
                        <div>NewYarkNNewYark NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>13:00</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>16:50</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                </tr>
            </table>
        </div>
        <div style="padding: 5px 0 0 5px;z-index:1;width: 150px;position:sticky;left:0;top:0;margin-bottom: 5px;font-weight: 600;">2020-12-29</div>
        <div style="width:100%">
            <table style="width:100%">
                <tr>
                    <th class="width100px">
                        <div>EmpName</div>
                    </th>
                    <th class="width86px">
                        <div>EmpIdD</div>
                    </th>
                    <th class="width100px">
                        <div>MTN</div>
                    </th>
                    <th class="width120px">
                        <div>WorkingTime</div>
                    </th>
                    <th class="width86px">
                        <div>StartTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                    <th class="width86px">
                        <div>LunchTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                    <th class="width86px">
                        <div>EndTime</div>
                    </th>
                    <th class="width150px">
                        <div>Location</div>
                    </th>
                </tr>
                <tr>
                    <td class="width100px">
                        <div>William Reehil</div>
                    </td>
                    <td class="width86px">
                        <div>12345</div>
                    </td>
                    <td class="width100px">
                        <div>91657897698</div>
                    </td>
                    <td class="width120px">
                        <div>09:00-17:00</div>
                    </td>
                    <td class="width86px">
                        <div>10:30</div>
                    </td>
                    <td class="width150px">
                        <div> NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>13:00</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>16:50</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                </tr>
                <tr>
                    <td class="width100px">
                        <div>William Reehil</div>
                    </td>
                    <td class="width86px">
                        <div>12345</div>
                    </td>
                    <td class="width100px">
                        <div>91657897698</div>
                    </td>
                    <td class="width120px">
                        <div>09:00-17:00</div>
                    </td>
                    <td class="width86px">
                        <div>10:30</div>
                    </td>
                    <td class="width150px">
                        <div> NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>13:00</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                    <td class="width86px">
                        <div>16:50</div>
                    </td>
                    <td class="width150px">
                        <div>NewYark</div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>

</html>

date wise employees report table

So, finally - I want achieve something like this:

first_three_columns_with_headings_should_be_fixed

What things can I try?

Venkaiah Yepuri
  • 1,561
  • 3
  • 18
  • 29
  • One simple solution I was thought about is split it to 2 separated tables, the first table is 3 first columns - no scroll, the second one is the rest columns and scrollable. – thanhdx Apr 02 '20 at 13:32
  • I too thought same @thanhdx but when have more text in second table that time rows are looks miss mapping :( – Venkaiah Yepuri Apr 02 '20 at 13:39
  • @Venki try the two table solution and then explain the problems in it. – DumbCoder7 Apr 02 '20 at 13:48
  • @DumbCoder7 Sure, let me try it. – Venkaiah Yepuri Apr 02 '20 at 13:49
  • @DumbCoder7, please have a look here https://pasteboard.co/J1X8WJx.png as having a less text in first table and having more text in second table and its getting wrap down so in this case text pushing a row to down a bit. So first table first row and second table first row are not in sync :( – Venkaiah Yepuri Apr 02 '20 at 14:07

1 Answers1

4

You can adapt a standard HTML Table to conform to your needs.

With tables the mechanics are laid out nicely in this answer by avernet, so please read that as to the issues you would face regarding directly manipulating the table.

You can make use of wrappers and nth-child class selectors a collection of these can be found here.

Now for a demo of how this wrapping works is below...

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style>
        .Light{
            background-color: lightgrey;
        }
        .Dark{
            background-color: darkgrey;
        }
        table{
            border: none;
            padding:none;
            margin:none;
            min-width: 1200px;
        }
        table tr th{
            padding-left: 15pt;
            height:24pt;
        }
        table tr td, table tr th{
            padding: 15pt;
            min-width: 150px;
        }
        
        .tableWrap{
            max-width: 800px;
            overflow-x: scroll;
        }
        .ParentPos{
            position: absolute;
        }
        .ChildPos{
            position: relative;
            left: 0;
            right:0;
            top:-0.575rem;
            bottom:0px;
            height: 100%
        }
        /*First 3 cells in the header row:*/
        table tr th:nth-child(-n+3){
            position: absolute;
            padding-top: 27pt;
            padding-bottom: 4pt;
        }
        /*First 3 cells in the content row:*/
        table tr td:nth-child(-n+3){
            position: absolute;
            padding-top: 27pt;
            padding-bottom: 16.75pt;
        }
        table tr th:nth-child(2), table tr td:nth-child(2){
            left:145pt;
        }
        table tr th:nth-child(3), table tr td:nth-child(3){
            left:287pt;
        }
        table tr th:nth-child(4){
            padding-left: 440pt;
        }
        table tr td:nth-child(4){
            padding-left: 500pt;
        }
        /*Making the spacing even out:*/
        table tr th:nth-child(n+5){
            padding-left: 0pt;
        }
        /*Making the spacing even out:*/
        table tr td:nth-child(n+5){
            padding-left: 60pt;
        }
        /*This sets alternating colours on each odd numbered column:*/
        table tr:nth-child(odd) td, table tr:nth-child(odd) th {
            background-color: lightgrey;  
        }
        /*This sets alternating colours on each even numbered column:*/
        table tr:nth-child(even) td, table tr:nth-child(even) th {
            background-color: darkgrey;  
        }
    </style>
</head>
<body>
    <div class="tableWrap">
       <table cellspacing="0">
        <tr>
            <th>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Heading 1
                    </div>
                </div>
            </td>
            <th>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Heading 2
                    </div>
                </div>
            </th>
            <th>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Heading 3
                    </div>
                </div>
            </th>
            <th>Heading 4</th>
            <th>Heading 5</th>
            <th>Heading 6</th>
            <th>Heading 7</th>
        </tr>
        <tr>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 1
                    </div>
                </div>
            </td>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 2
                    </div>
                </div>
            </td>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 3
                    </div>
                </div>
            </td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
        </tr>
        <tr>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 1
                    </div>
                </div>
            </td>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 2
                    </div>
                </div>
            </td>
            <td>
                <div class="ParentPos">
                    <div class="ChildPos">
                        Content 3
                    </div>
                </div>
            </td>
            <td>Content 4</td>
            <td>Content 5</td>
            <td>Content 6</td>
            <td>Content 7</td>
        </tr>
       </table>
    </div>
</body>
</html>
  • Thank you @Bridge Keeper for your time. I am tried with your suggestion its working when all table content having similar background color but when we trying with different background color on even & odd content rows in that case text is overlapping as I shown in my ask ? – Venkaiah Yepuri Apr 03 '20 at 04:50
  • @Venki I've updated the answer to have alternating colours on odd and even columns –  Apr 03 '20 at 07:34
  • A big thanks @Bridge Keeper & sorry for late reply. Its really useful for me now. Thanks again. – Venkaiah Yepuri Apr 06 '20 at 05:46
  • 1
    actually I need alternative colors in horizontal rather in vertical way and I made code changes like below **table tr:nth-child(odd) { background-color: lightgrey; } table tr:nth-child(even) { background-color: darkgrey; }** then seeing text overlapping issue. Can you please help on this ? – Venkaiah Yepuri Apr 06 '20 at 09:04
  • Hi @Venki I see horizontal row colours is what you needed let's fix it. This is because the changes you made to show different coloured rows are applied to the `tr` and not the `td`, you want to style each individual `td` of the row so you were close you just needed to specify the `td` after the alternating `tr` I've updated the answer. –  Apr 06 '20 at 09:36
  • 1
    You are super @Bridge Keeper, and now I got how I want exactly. Thank you again for your big help and fabulous skills. – Venkaiah Yepuri Apr 06 '20 at 11:54
  • 1
    Oh! Yeah you are right @Bridge Keeper, I did not now. – Venkaiah Yepuri Apr 08 '20 at 05:43
  • sorry for troubling you again :( this time its regarding when any **** have more content then doing horizontal scroll then header 4 content is overloading with header 3 content [please see here](https://ibb.co/99cLG8Z) and I debugged somewhat and comes to know like you have been using padding-bottom somewhat but when **** having more content by that time that specific padding-bottom is not enough to hide complete header 4 content while scrolling horizontally. Can you please help on this Bridge Keeper? – Venkaiah Yepuri Apr 08 '20 at 12:54
  • have been raised one more request for that bug [here](https://stackoverflow.com/questions/61115383/html-table-td-content-overloading-with-another-static-td-content-while-horiz) if you have time can you please look there? – Venkaiah Yepuri Apr 09 '20 at 06:48