类似 `ls` 的 HTML 表格

Question

是否可以创建格式类似于 POSIX ls 的 HTML/CSS 表？也就是说，条目按字母顺序显示在列中，其中列数取决于每列的宽度？

例如，在此屏幕截图中查看列如何只根据需要设置宽度。第四列比其他列宽得多，第三列最窄，因为它的所有文件名都很短。此屏幕截图中有四列，但如果终端更宽则可能更多，如果更窄则可能更少。

列数根据终端的宽度和列表中的确切文件名而变化。随着显示更多文件名，将添加更多列。一旦到达终端的右侧，ls 会使列变高。如果有很多短文件名，则可能有很多列，而如果文件名很长，则列数会更少。

Answer 1

好吧，好消息是浏览器“有点”支持表格元素和 table-layout:auto 呈现(这应该是默认设置，并且是在适当的 CSS 重置之后)。坏消息是它只是“有点”。

对于初学者，您必须选择列数并呈现 HTML 表格，以便元素位于正确的列中 - 这包括所有排序!然后，如果你不过度限制表格中任何列的宽度，请确保表格是 table-layout:auto，并设置表格的宽度，那么结果应该是 be similar to的 ls - 也就是说，列将根据内容“自动调整宽度”。

要获得与 ls “相同”的结果，需要采取更严厉的措施，例如使用固定字体(如终端中使用的字体)并手动计算列宽(如 ls 所做的)，也许在

 元素。 CSS/HTML 有一些局限性，而 ls 通过对固定宽度的终端进行布局计算本身来简单地避免这些局限性。