Фиксация заголовка таблицы - использование flex

sky-sky · October 8, 2018

Я создал таблицу с вертикальной и горизонтальной прокруткой.

Основной блок назначил - display: flex;

1. У меня принудительно стали переносится слова на другую строку ( я думал они будут переносится только при изменении разрешения)

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

3. Чтобы слова в ячейках автоматически переносились только тогда, когда меняется ширина экрана?

index

Скрытый текст


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>center-align</title>
    <link rel="stylesheet" type="text/css" href="css/style-v3.css" />
    <meta charset="utf-8" />
</head>
<body>

    <h2>Чистый CSS – Фиксированный заголовок переменной ширины в таблице, - выровненный по центру</h2>
    <div class="fixed-table-container ext">
        <div class="header-background"> </div>
        <div class="fixed-table-container-inner">
            <table cellspacing="0">
                <thead>
                    <tr>
                        <th class="first">
                            <div class="th-header">
                                <div class="th-inner"><span>first name</span></div>
                            </div>
                        </th>
                        <th>
                            <div class="th-header">
                                <div class="th-inner"><span>last name</span></div>
                            </div>
                        </th>
                        <th>
                            <div class="th-header">
                                <div class="th-inner"><span>login</span></div>
                            </div>
                        </th>
                        <th>
                            <div class="th-header">
                                <div class="th-inner"><span>e-mail</span></div>
                            </div>
                        </th>
                        <th>
                            <div class="th-header">
                                <div class="th-inner"><span>telephone</span></div>
                            </div>
                        </th>
                        <th>
                            <div class="th-header">
                                <div class="th-inner"><span>credit number</span></div>
                            </div>
                        </th>
                        <th>
                            <div class="th-header">
                                <div class="th-inner"><span>gender</span></div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Анна</td>
                        <td>Торина drtertrettrt</td>
                        <td>a.torina</td>
                        <td>torina@gmail.com</td>
                        <td>111-11-11-11</td>
                        <td>111010111</td>
                        <td>female</td>
                    </tr>
                    <tr>
                        <td>Алина</td>
                        <td>Дорина</td>
                        <td>a.dorina</td>
                        <td>dorina@gmail.com</td>
                        <td>121-11-11-11</td>
                        <td>511010111</td>
                        <td>female</td>
                    </tr>
                    <tr>
                        <td>Арина</td>
                        <td>Лорина</td>
                        <td>a.lorina</td>
                        <td>lorina@mail.com</td>
                        <td>131-11-11-11</td>
                        <td>571010111</td>
                        <td>female</td>
                    </tr>
                    <tr>
                        <td>Роман</td>
                        <td>Турин</td>
                        <td>к.turin</td>
                        <td>turin@mail.com</td>
                        <td>132-11-11-11</td>
                        <td>521010111</td>
                        <td>male</td>
                    </tr>
                    <tr>
                        <td>Воман</td>
                        <td>Дурин</td>
                        <td>к.surin</td>
                        <td>surin@mail.com</td>
                        <td>232-11-11-11</td>
                        <td>5l1010111</td>
                        <td>male</td>
                    </tr>
                    <tr>
                        <td>Коман</td>
                        <td>Цурин</td>
                        <td>к.zurin</td>
                        <td>zurin@tail.com</td>
                        <td>2432-11-11-11</td>
                        <td>821010111</td>
                        <td>male</td>
                    </tr>
                    <tr>
                        <td>Шоман</td>
                        <td>Пурин</td>
                        <td>к.hurin</td>
                        <td>hurin@sail.com</td>
                        <td>235-11-11-11</td>
                        <td>828010111</td>
                        <td>male</td>
                    </tr>
                    <tr>
                        <td>Дарина</td>
                        <td>Ворина</td>
                        <td>a.vorina</td>
                        <td>vorina@moil.com</td>
                        <td>731-11-11-11</td>
                        <td>871010111</td>
                        <td>female</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>

Скрытый текст


body {
    padding: 20px;
    background-color: #FFF7DC;
    color: black;
    min-width: 530px; /*устанавливает минимальную ширину области для содержимого элемента.*/
}

/* для всех ячеек таблицы*/
td {
    border: 0.5px solid #ff0000;
    border-top: 0.5px solid #ccc; /*границы ячейки*/
    border-bottom: 0.5px solid #ccc; /*границы ячейки*/
    padding: 5px; /*расстояние со всех сторон содержимого ячейки от ее внутренних границ*/
    text-align: left; /* выравнивание по левому краю */
}

/*блок над таблицей*/
.header-background {
    position: absolute; /*Устанавливает способ позиционирования элемента 
         относительно окна браузера или других объектов на веб-странице.*/
    border: 1px solid #4800ff;
    height: 20px; /*высота данного блока*/
    /* для позиционирования элемента*/
    top: 10px;
    right: 10px;
    left: 10px;
    background-color: #c8f880; /*c8f880*/
}

/*основной контейнер для таблицы*/
.fixed-table-container {
    width: 42%;
    height: 200px;
    border: 1px solid #4800ff;
    margin: 0 auto; /*по центру экрана*/
    background-color: #776fe3; /*фон внурти основного блока f5f3ee*/
    display: flex;
    justify-content: center; /* выравнивание flex-элементов по центру*/
    padding-top: 30px; /*высота шапки таблицы (там где поля колонок)*/
}

.fixed-table-container-inner {
    overflow-x: auto;
    overflow-y: auto; /*Свойство overflow управляет отображением 
        содержания блочного элемента, если оно 
        целиком не помещается и выходит за область 
        заданных размеров.
        auto - Полосы прокрутки добавляются только при необходимости.*/
    height: 100%;
}

/* для элемента table*/
table {
    background-color: #ffffff; /*цвет внутри таблицы*/
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
}

/*внутренние блоки ячеек загловка таблицы*/
.th-inner {
    /*border-left: 1px solid black;*/
    border: 1px solid black;
    height: 40px;
    vertical-align: central;
    text-align: left;
    padding-left: 5px;

}

Прошу объяснить как это исправить .

Sign In

Фиксация заголовка таблицы - использование flex

Question

sky-sky

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information