У меня такой код
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tscroll {
width: 500px;
overflow-x: scroll;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
</style>
</head>
<body>
<html>
<div class="tscroll">
<table cellspacing="100" align="center" style="font-size: 20px; text-align: center;">
</tr>
<td style="border:0.5px solid #E1DEE6; width: 500px; height: 500px; background-color:white;">
<div>
<h2> Column 1 </h2>
<div>
<p>
Coming soon
</p>
</div>
</td>
<td style="border:0.5px solid #E1DEE6; width: 400px; height: 500px; background-color:white;">
<div>
<h2> Column 2 </h2>
<div>
<p>
Coming soon
</p>
</div>
</td>
<td style="border:0.5px solid #E1DEE6; width: 400px; height: 500px; background-color:white;">
<div>
<h2> Column 3 </h2>
<div>
<p>
Coming soon
</p>
</div>
</td>
<td style="border:0.5px solid #E1DEE6; width: 400px; height: 500px; background-color:white;">
<div>
<h2> Column 4 </h2>
<div>
<p>
Coming soon
</p>
</div>
</td>
<td style="border:0.5px solid #E1DEE6; width: 400px; height: 500px; background-color:white;">
<div>
<h2> Column 5 </h2>
<div>
<p>
Coming soon
</p>
</div>
</td>
<td style="border:0.5px solid #E1DEE6; width: 400px; height: 500px; background-color:white;">
<div>
<h2> Column 6 </h2>
<div>
<p>
Coming soon
</p>
</div>
</td>
</tr>
</body>
</html>
По какой-то причине столбцы сверхтонкие. Я хочу, чтобы они были больше, но когда я меняю ширину в <td>, ничего не происходит. Я пытаюсь создать прокручиваемую (по столбцам) таблицу, и мне нужно, чтобы столбцы были достаточно большими, чтобы одновременно отображалось только 2 столбца, затем прокрутите вправо, чтобы увидеть остальные.
Спасибо за любые советы!