#html #css
#HTML #css
Вопрос:
Я разрабатываю веб-сайт, и есть таблица со многими строками данных. Итак, я хотел сделать таблицу прокручиваемой, но исправить заголовок таблицы, чтобы пользователь знал, к чему принадлежат данные.
Теперь эта функция прокрутки работает хорошо, но таблица свернута. Я не могу растянуть таблицу до 100% ее контейнера (как это было до изменения).
Единственный способ, который работает, — установить ширину таблицы и ее столбцов на абсолютное значение в пикселях. Ну, как всем известно, это крайне неблагоприятно для мобильного дизайна, поэтому было бы здорово, если бы таблица снова была нормальной с ее относительными значениями…
Вот мой код:
$width:1200px;
.fixed_headers {
width: $width;
table-layout: fixed;
border-collapse: collapse;
td: nth-child(1), th: nth-child(1) {
min-width: calc(0.16 * # {
$width
}
);
}
td:nth-child(2),
th:nth-child(2) {
min-width: calc(0.42 * # {
$width
}
);
}
td:nth-child(3),
th:nth-child(3) {
min-width: calc(0.42 * # {
$width
}
);
}
thead {
tr {
display: block;
position: relative;
}
}
tbody {
display: block;
overflow-y: scroll;
width: calc(# {
$width
}
- 2px); // border left and right 1px
height:30vh;
}
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="table-responsive">
<table class="table table-condensed table-hover table-striped table-bordered fixed-headers">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</div> Как вы видите, я установил ширину таблицы 1200px , но я хочу, 100% чтобы она была адаптивной.
У вас есть идея, как я мог бы это решить?
Пример проблемы: http://codepen.io/anon/pen/WGrzaR?editors=1100
Комментарии:
1. Почему бы не использовать медиа-запросы с несколькими абсолютными значениями?
2. Потому что таблица должна быть на 100% адаптивного контейнера. Поэтому мне пришлось бы делать медиа-запрос для каждого пикселя, что довольно бессмысленно. И обычно должна быть возможность использовать относительные значения.
3. Понятия не имею, о чем вы говорите. Пожалуйста, посмотрите медиа-запросы.
4. Я абсолютно знаю, что такое медиа-запросы. Спасибо. Но таблица находится в модальном режиме, который распространяется на 80% области просмотра при заданной максимальной середине. Если экран меньше, модальный тоже становится меньше, поэтому таблица также должна уменьшаться. Поскольку модальный параметр является адаптивным (уменьшается при изменении размера экрана), таблица также должна быть адаптивной. С помощью медиа-запросов я могу установить только фиксированную ширину для данного окна просмотра. Итак, да, мне пришлось бы создавать новый запрос для каждого пикселя! Подумайте об этом. Вы заметите
5. Модальное значение основано на начальной ширине. Основывайте запрос на этой ширине, и у вас будет модальное значение, которое варьируется от 80% до 100 или 70 или как вы выберете. Кроме того, похоже, что отзывчивость модели нуждается в доработке. Работать с ней не должно быть так сложно.
Ответ №1:
Пример для вашего кода:
<Style>
table {
width: 100vw;
max-height: 300px;
background-color: yellow;
overflow: scroll;
}
th {
background-color: blue;
height: 40px;
width: 30%;
}
td {
height: 40px;
background-color: red;
width: 100px;
}
</Style>
Комментарии:
1. Я не знаю, зачем вы написали этот код. Это не имеет никакого отношения к моей проблеме.
2. @Ollie вы должны обновить свой первоначальный ответ вместо добавления нового.
Ответ №2:
Поместите таблицу в div и установите для этого div желаемую ширину, например, 100vw.
Затем просто установите для таблицы значение 100%.
Комментарии:
1. Вы даже пробовали это? Или вы просто догадываетесь?
2. Это работало на моей машине, однако я бы лично полностью изменил код.
3. В этом случае не работает. Как бы вы написали код? Я был бы признателен за ваши подсказки
4. Единицы отображения могут быть сложными, если большинство элементов, составляющих вашу адаптивную сетку, являются процентами, размер которых зависит от родительских / предковых элементов, а не от области просмотра. Например, представьте, что эта таблица находится в столбце основного содержимого, очень похожем на вопросы и ответы StackOverflow, с шириной 65%. Как вы собираетесь обрабатывать использование единиц просмотра в этом элементе шириной 65%, чтобы он не переполнял элемент, когда единица просмотра больше?
5. @hungerstar У вас нет идеи, почему это вызвано?