#css #html-table #scroll
Вопрос:
Я, вероятно, не первый, кто задает этот вопрос, но я нигде не могу найти рабочее решение.
Это чрезвычайно упрощенная версия моей страницы
<table style="white-space:nowrap;font-size:30px"><tr><td style="background-color:blue">SIDE NAV SIDE NAV</td><td>
<table style="overflow-y:auto">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
<td>Jack and jill wen up the hill</td>
</tr>
</tbody>
</table> </td></tr></table> Теперь я хочу, чтобы прокручивалось только table то, что должно прокручиваться. Боковая навигационная панель всегда должна быть видна.
Я также попробовал div версию с flex , вместо a table , но существует та же проблема.
вот div версия
<div style="white-space:nowrap;display:flex;font-size:30px"><div style="background-color:blue">SIDE NAV SIDE NAV</div><div>
<table style="overflow-y:auto">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
<td>Jack and jill wen up the hill</td>
</tr>
</tbody>
</table> </div> Если я помещу в таблицу жестко заданную фиксированную ширину, то она будет работать нормально. Но, конечно, мне не нужна фиксированная ширина. Он должен работать для любого размера экрана/браузера.
Как этого можно добиться?
FWIW: вот 2 версии в codepen
таблица: https://codepen.io/yisman/pen/LYLKzbw
div: https://codepen.io/yisman/pen/GREbMON
Спасибо
Ответ №1:
Я не знаю, что ты имеешь в виду, но надеюсь, что это может тебе помочь.
.container {
width: 100%;
overflow: scroll;
}
.sidebar {
position: sticky;
top: 0;
left: 0;
} <div class="container" style="white-space:nowrap;display:flex;font-size:30px"><div class="sidebar" style="background-color:blue">SIDE NAV SIDE NAV</div><div>
<table style="overflow-y:auto">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
<td>Jack and jill wen up the hill</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
<td>Jack and jill wen up the hill</td>
</tr>
</tbody>
</table> </div> Комментарии:
1. Привет. Спасибо за ваше время и ваш вклад. Я ценю ваши усилия. но все равно это кажется немного банальным. так как свиток находится в нижней части страницы. не за столом. (таблица может быть короче, чем вся страница), и она не так интуитивно понятна для пользователя. есть идеи получше?