如何防止列在HTML中换行？

我正在尝试对单元格进行布局，类似于图中的输出：

但是我需要做很多行，我希望列是一个特定的大小，如果超过屏幕的大小，就不要换行。例如，假设我有10列，每列为200像素。如果屏幕上有太多的列，我想要一个水平滚动条，而不是包装其他列。我的代码是这样的（当我第一次尝试使用表时，我从W3Schools.com网站上获得了它）：

.column{
浮动：左；
宽度：100px；
填充：10px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
第1栏
一些文字

第2栏
一些文字

第3栏
一些文字

第4栏
一些文字

第1栏
一些文字

第2栏
一些文字

第3栏
一些文字

第4栏
一些文字

只要没有足够的列来覆盖屏幕大小，这就非常有效，但我需要它比屏幕更宽（要么这样，要么我的最终实现将有一堆列设置为屏幕宽度的2%，这将是非常小的）

我曾尝试过使用“溢出：滚动”和“显示：内联”；但没有任何成功

作为参考，原始项目如下所示：

而且编码都是直接输入身体，这是非常难以阅读和编辑的

<FONT COLOR=CYAN>Star type in angle brackets, &lt; &gt;, means the Star is in The Rift</FONT>
+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+
|            |            |            |            |            |            |            |            |            |            |            |            | Fuoss      |            |            |            |            |            | Piceance   |            |            |            | Kimberlite |            |            |            |            |            |            |            |            |            |
|            |     <FONT COLOR=MAGENTA>M</FONT>      |            |            |            |            |            |            |            |     <FONT COLOR="#0000FF">H</FONT>      |            |     <FONT COLOR=WHITE>N</FONT>      |     <FONT COLOR=WHITE>N</FONT>      |            |            |     <FONT COLOR=MAGENTA>M</FONT>      |            |            |     <FONT COLOR=MAGENTA>M</FONT>      |     <FONT COLOR=RED>R</FONT>      |            |     <FONT COLOR="#00FF00">A</FONT>      |     <FONT COLOR=MAGENTA>M</FONT>      |            |            |     <FONT COLOR=YELLOW>X</FONT>      |            |            |            |            |            |            |
|            | DowChem    |            |            |            |            |            |            |            | Hewlett-Packard         | Erin       |            |            |            | Elkhorn    |            |            |            | New Jerusalem           | Lyra       |            |            |            | Morgan     |            |            |            |            |            |            |
+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------

尖括号中的星形表示该恒星位于裂谷中
+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+
|金伯利岩 |            |            |            |            |            |
|| M | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |            |            |            |            |            |
||道肯| | | | | | | | | | | | | | | | | | | | |惠普|艾琳| | | | | | | | | | | | |            |            |            |            |            |
+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------+------------

您可以将主体宽度设置为您希望的宽度

body{width: 3000px}

---

这就是您要做的吗？

您可以将div包装在具有以下属性的容器中：

.container {
    width: max-content;
    overflow: auto;
}

然后，div的宽度正好与需要的宽度相同（

max content

），如果列数超过视口的宽度，则应该滚动

.column{
浮动：左；
宽度：100px；
填充：10px；
}
.行{
内容：“；
显示：表格；
明确：两者皆有；
}
.集装箱{
宽度：最大含量；
溢出：自动；
}

第1栏
一些文字

第2栏
一些文字

第3栏
一些文字

第4栏
一些文字

第1栏
一些文字

第2栏
一些文字

第3栏
一些文字

第4栏
一些文字

第1栏
一些文字

第2栏
一些文字

第3栏
一些文字

第4栏
一些文字

第1栏
一些文字

第2栏
一些文字

第3栏
一些文字

第4栏
一些文字

通过简化HTML，您可以使用CSS网格：

*，
：：之前，
：：之后{
框大小：边框框；
保证金：0；
填充：0；
}
.包装纸{
/*触发网格布局：*/
显示：网格；
/*定义10列，每列的宽度为200px：*/
网格模板列：重复（10200px）；
/*定义网格项之间的2px间距
（纯美学，不需要；
适应口味：*/
网格间距：2px；
}
.细胞{
高度：2米；
边框：2倍实心#000；
}

第1栏
第2栏
第3栏
第4栏
第5栏
第6栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第6栏
第7栏
第8栏
第9栏
第10栏
第1栏
第2栏
第3栏
第4栏
第5栏
第6栏
第7栏
第8栏
.container {
    width: max-content;
    overflow: auto;
}