Замораживание первого столбца в таблице и поддержание постоянной высоты, где строка заголовка установлена ​​для переноса пробелов? - PullRequest
Новая
       6

Замораживание первого столбца в таблице и поддержание постоянной высоты, где строка заголовка установлена ​​для переноса пробелов?

1 голос
/ 23 сентября 2019

Я пытаюсь создать таблицу в HTML, которая имеет следующие свойства:

  • Первый столбец заморожен
  • Текст в строке заголовка обернут

Звучит просто, но у меня проблема с тем, что первый столбец в строке заголовка имеет неправильную высоту, я хотел бы, чтобы он соответствовал остальной части строки.Вот пример: 

tr th {
    white-space: pre-wrap !important;
}

tr td {
    white-space: nowrap;
}

.first-column {
    position: absolute;
    width: 140px;
    background-color: aliceblue;
    white-space: nowrap;
}

.first-column.header {
    background-color: red;
}

.second-column {
    padding-left: 145px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th class="first-column header">Aaaaa aaaaa</th>
                        <th class="second-column">Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Если вы выполните вышеизложенное, вы увидите, что высота столбца Aaaaa aaaaa не соответствует остальной частиряд.Установка высоты этого значения в 100% устанавливает для этого столбца высоту таблицы, а не строки.Я надеюсь, что ответ прост, и я только что пропустил какой-то очевидный фрагмент CSS, но я немного озадачен, поэтому некоторая помощь будет принята.

Одно из решений, которое у меня есть, - это использовать Javascript, так чтоустановить высоту динамически, что-то вроде этого: 

    <script>
        window.addEventListener("resize", function() {
            var firstColumnHeader = document.getElementById('first-column-header');
            var secondColumnHeader = document.getElementById('second-column-header');

            firstColumnHeader.style.height = secondColumnHeader.clientHeight;
        });
    </script>
</head>

<body>
    <div class="row">
        <div class="col-md-12">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th id="first-column-header" class="first-column header">Aaaaa aaaaa</th>
                            <th id="second-column-header" class="second-column">Bbb bbb bbb</th>

Я хотел бы избежать Javascript, если это возможно, однако, похоже, что я должен быть в состоянии сделать с CSS.

Спасибо

1 Ответ

1 голос
/ 26 сентября 2019

Я думаю, вы уже пришли к выводу, что позиция: absolute не работает, потому что таблица не применяет использованную высоту строки к ячейке abspos, как это было бы с ячейкой притока.Я не уверен, что наложенный браузером display:table-cell может быть даже проигнорирован для ячеек abspos.

В любом случае, попробуйте new-ish position: sticky с left: xx, как показано ниже.При этом вам не нужно дублировать ширину в отступе второго столбца, чтобы освободить место для первого столбца. 

tr th {
    white-space: pre-wrap !important;
}

tr td {
    white-space: nowrap;
}

.first-column {
    position: sticky;
    left: 0px;
    width: 140px;
    background-color: aliceblue;
    white-space: nowrap;
}

.first-column.header {
    background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th class="first-column header">Aaaaa aaaaa</th>
                        <th class="second-column">Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                        <th>Bbb bbb bbb</th>
                        <th>Cc cccc</th>
                        <th>Ddddd dd dd ddddd</th>
                        <th>E</th>
                        <th>Ffff</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                    <tr>
                        <td class="first-column">dsfgsgs gsdfg</td>
                        <td class="second-column">dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                        <td>dsfgsgs gsdfg</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...