#html #css #html-table
#HTML #css #html-таблица
Вопрос:
Здесь я устанавливаю содержимое с помощью display-flex
css в родительском main-wrapper
, но я хочу переполнить содержимое таблицы при прокрутке.
Это можно решить с помощью float:left
css, но я не хочу устанавливать структуру с помощью float:left
.
Итак, нужно только содержимое правой стороны при прокрутке, а не прокрутка всей страницы.
* {
margin: 0px;
padding: 0px;
}
table, td, th {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
th,td {
padding: 5px 10px;
}
.main-wrapper {
display: flex;
}
.sidebar {
width: 300px;
height: 175px;
display: block;
min-width: 300px;
background-color: #eeeeee;
margin-right: 15px;
}
.table-wrapper {
overflow: auto;
}
<div class="main-wrapper">
<div class="sidebar">
</div>
<div class="main-content">
<div class="table-wrapper">
<table>
<tr>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
</tr>
<tr>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
</tr>
<tr>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
</tr>
</table>
</div>
</div>
</div>
Ответ №1:
Не могли бы вы проверить приведенный ниже код? Надеюсь, это сработает для вас. Вам нужно указать ширину .main-content
и максимальную ширину .table-wrapper
.
Пожалуйста, обратитесь к этой ссылке: https://jsfiddle.net/yudizsolutions/9jbqudo1/1 /
* {
margin: 0px;
padding: 0px;
}
table,
td,
th {
border: 1px solid black;
}
table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
th,
td {
padding: 5px 10px;
}
.main-wrapper {
display: flex;
}
.sidebar {
width: 300px;
height: 175px;
display: block;
min-width: 300px;
background-color: #eeeeee;
margin-right: 15px;
}
.table-wrapper {
overflow: auto;
max-width: 100%;
}
.main-content {
width: calc(100% - 300px);
}
<div class="main-wrapper">
<div class="sidebar">
</div>
<div class="main-content">
<div class="table-wrapper">
<table>
<tr>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
<th>Title Heading</th>
</tr>
<tr>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
</tr>
<tr>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
<td>Table content text</td>
</tr>
</table>
</div>
</div>
</div>