Как сделать первые три столбца с заголовками таблицы html фиксированными, а остальные все столбцы можно прокручивать - PullRequest
Новая
       0

Как сделать первые три столбца с заголовками таблицы html фиксированными, а остальные все столбцы можно прокручивать

1 голос
/ 02 апреля 2020

Этот вопрос заставляет меня чувствовать, что это дубликат, но, пройдя через несколько связанных тем, я понял ... Я прошел через большинство связанных тем ( фиксированные столбцы ) в отношении моих требований и после ответы, с которыми я сталкиваюсь, с некоторыми проблемами, связанными с наложением текста, как показано ниже ...

text_overlapping_issue

Я пытаюсь добиться чего-то вроде сделать первый три столбца с заголовками таблицы html должны быть исправлены, а все остальные столбцы могут быть прокручиваемыми . 

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

Итак, наконец - я хочу добиться чего-то вроде этого:

first_three_columns_with_headings_should_be_fixed

Что можно попробовать?

1 Ответ

4 голосов
/ 02 апреля 2020

Вы можете адаптировать стандарт HTML Table в соответствии с вашими потребностями.

С таблицами механика хорошо изложена в этом ответе пр. rnet, поэтому, пожалуйста, прочитайте, что касается проблем, с которыми вы столкнетесь при непосредственном манипулировании таблицей.

Вы можете использовать упаковщики и nth-child class selectors коллекцию из них можно найти здесь .

Ниже приведена демонстрация того, как работает эта упаковка ... 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...