Как я могу настроить CSS здесь, чтобы таблица контролировала общую ширину страницы, а не область просмотра? Я хотел бы сделать это, все еще используя Bulma.
Я думаю, что это действительно вопрос о Flexbox, это конкретный c пример для контекста.
При использовании Bulma для css (https://bulma.io) иногда мне нужно представить таблицу, которая шире области просмотра, которая требует от пользователя прокрутки в направлении y.
Когда я пытаюсь и сделайте это, либо ширина ячейки таблицы (и ширина элемента управления в ячейке таблицы) сжимается в направлении y, так что компоновка ячеек переопределяется, ИЛИ таблица расширяется от области просмотра вправо, без прокрутки y поэтому самые правые ячейки не видны.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scroll Y, dangit.</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
</head>
<body>
<section class="section" style="border:3px solid red;">
<div class="container" style="border:3px solid green;">
<h1 class="title">
I'm stuck.
</h1>
<table class="table is-bordered">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
</tr>
</table>
</div>
</section>
<table class="table is-bordered">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
<td>nine</td>
<td>ten</td>
</tr>
</table>
</body>
</html>