Прокручиваемый стол Tbody

Есть много сообщений о том, как сделать тело таблицы HTML прокручиваемым.

К сожалению, мои навыки CSS кажутся слабыми, потому что, несмотря на все эти сообщения, мне было трудно с этим.

У меня есть таблица, которая будет заполняться динамически. Первоначально он может отображаться с пустыми строками. Все работает, за исключением того, что есть опасения, что набор данных может быть большим, поэтому существует требование, чтобы таблица имела фиксированную высоту и возможность прокрутки по оси Y.

HTML выглядит следующим образом. Я добавил много пустых строк, пока он только выкладывается.

  <table id = "output" class = "gridtable">
        <thead>
            <tr >
                <th></th>
                <th>AA</th>
                <th>BB</th>
                <th>CC</th>
                <th>DD</th>
                <th>EE</th>
            </tr>
        </thead>
        <tbody >
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        </tbody>
    </table>

Это текущий код CSS, который я пробую. Я бы хотел, чтобы ширина таблицы динамически оставалась на уровне 80% при изменении ширины окна.

table.gridtable thead { 
    display: block; 
} 
table.gridtable thead tr{ 
    width: 100%; 
} 
table.gridtable tbody tr{ 
    width: 97%; 
} 
table.gridtable tbody { 
    display: block; 
    height: 200px; 
    overflow-y: auto; 
    overflow-x: hidden; 
    width: 100%;
} 
table.gridtable { 
    border-spacing: 0; 
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    width: 80%;
    margin-left:auto; 
    margin-right:auto;
} 
table.gridtable td { 
    border:1px solid #000000;
    padding: 2px 4px; 
    height: 20px;
    width: 16.6666%;
} 
table.gridtable th { 
    background: #f2f2f2; 
    border-bottom: 1px solid #aaa; 
    border-top: 1px solid #aaa; 
    border-width: 1px;
    border-color: #666666;
    text-align: center; 
    padding: 8px 4px;  
    height: 20px;
    width: 16.6666%;
}

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

Прокручиваемый стол Tbody

html css html-table

17.08.2018 01:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Возможно, этот код может вам помочь.

Я заметил, что вы перезаписываете дополнительный код, нет необходимости писать элемент перед точкой, нужен просто класс, а граница может иметь сокращение в формате border: width style color.

.gridtable {
    border-spacing: 0;
    border-collapse: collapse;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border: 1px solid #666;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: table;
    box-sizing: border-box;
}

.gridtable thead {
    display: table;
    min-width: 100%;
    background: #f2f2f2;
    border-bottom: 1px solid #666;
    border-top: 1px solid #666;
    text-align: center;
}

.gridtable th {
    padding: 8px 4px;
    width: 16.6%;
}

.gridtable tbody {
    height: 200px;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
}

.gridtable tr {
    display: table;
    width: 100%;
    min-height: 20px;
}

.gridtable td {
    border: 1px solid #000000;
    padding: 2px 4px;
    width: 16.6%;
    height: 20px;
}

<table id = "output" class = "gridtable">
    <thead>
        <tr>
            <th>AA</th>
            <th>BB</th>
            <th>CC</th>
            <th>DD</th>
            <th>EE</th>
            <th>FF</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

17.08.2018 05:56

Другие вопросы по теме

Загрузка нескольких файлов (изображений) с предварительным просмотром приводит к сбою браузера

Возможно ли объявление настраиваемых свойств CSS в качестве ключей, а не значений?

Адаптивное изображение героя с кнопкой + проблемы с текстом в рамке

Включить прокрутку в указанном div?

Помещение ul, li и другого кода во внешние таблицы стилей CSS

Несколько флип-боксов - но переворачивайте только тот, на котором щелкнули

Форматирование HTML5 / Bootstrap - изображения без отступов / полей

HTML / CSS Как сделать элемент прозрачным для одного элемента, но перекрыть другой

Проблемы с размером CSS

Фильтрация по цене

Прокручиваемый стол Tbody

Ответы 1

Другие вопросы по теме

Похожие вопросы