Question

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

例如，请参阅此屏幕截图，列中的列只有必要的宽度。第四列比其他列宽得多，第三列是最窄的，因为它的所有文件名都很短。此屏幕截图中有四列，但如果终端较宽则可能会更多，如果更窄则可能会更少。

ls screenshot

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

Answer 1

好消息是，浏览器“sorta”支持使用表格元素和table-layout:auto渲染（这应该是默认值，并且在适当的CSS重置之后）。坏消息是它只是“有点”。

对于初学者，你必须选择列数并呈现HTML表，以便项目在正确的列中 - 这包括所有排序！然后，如果您没有过度约束表中任何列的宽度，请确保表为table-layout:auto，并设置表的宽度，然后结果应为be similar to ls的 - 也就是说，列将根据内容“自动调整宽度”。

要获得与ls“相同”的结果将需要更严厉的东西，例如使用固定字体（如在终端中使用的那样）和手动计算列宽（如ls确实），也许在＆LT;预＆GT;元件。 CSS / HTML有一些限制，只需通过对固定宽度的终端进行布局计算就可以避免这种情况。

Answer 2

这是一张桌子。除非你没有指定别的东西。你可能会做这样的事情

<table>
<colgroup style="width:22%"></colgroup>
<colgroup style="width:25%"></colgroup>
<colgroup style="width:25%"></colgroup>
<colgroup style="width:25%"></colgroup>
<colgroup style="width:3%"></colgroup>       
<thead>
     <tr>
    <th>Closed Day</th>
    <th><span>|</span>Is this a paid day?</th>
    <th><span>|</span>Last updated date</th>
    <th><span>|</span>Last updated by</th>
    <th><span>|</span>Current?</th>
     </tr>
</thead>
<tbody>
    <tr>
        <td>08/10/2013</td>
        <td>No</td>
        <td>02/12/2014</td>
        <td>c-jsmith</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>09/01/2013</td>
        <td>Yes</td>
        <td>02/12/2014</td>
        <td>c-kkearney</td>
        <td>Yes</td>
    </tr>
    <tr>
        <td>12/25/2013</td>
        <td>Yes</td>
        <td>01/12/2014</td>
        <td>c-jjohnson</td>
        <td>Yes</td>
        </tr>
    <tr>
        <td>12/26/2013</td>
        <td>Yes</td>
        <td>02/01/2014</td>
        <td>c-gthompson</td>
        <td>Yes</td>
    </tr>
</tbody>

使用类似于上面的表格和下面的脚本进行一些修改，您应该能够通过定位限制行数和向右叠加。

         <script>
           function tableWrap() {
              var maxRows = 10;

              var table = document.getElementById('myTable');
              var wrapper = table.parentNode;
              var tableRows = table.rows.length;
              var height = 0;
                if (tableRows > maxRows) {
                   for (var i = 0; i < maxRows; i++) {
                      height += table.rows[i].Height;
                   }
                      wrapper.style.height = height + "px";
                 }
               }
         </script>

Answer 3

我设法用javascript开始：

var outer = document.getElementById("outer");

function setColumns(n) {
    var style = outer.style;
    style.columnCount = n;
    style.MozColumnCount = n;
    style.WebkitColumnCount = n;
}
var i = 1;
while (outer.scrollWidth <= outer.offsetWidth) {
    setColumns(++i);
}
setColumns(i - 1);

http://jsfiddle.net/jEq4R/2/

它不处理宽度，但它至少提供了很多列。

编辑：适用于firefox但不适用于webkit

Answer 4

调整此jsfiddle中的宽度，然后查看http://jsfiddle.net/sajith/DdqfA/

<强> HTML

<div>column</div><div>column</div><div>column</div>
<div>column</div><div>column</div><div>column</div>
<div>column</div><div>column</div><div>column</div>
<div>column</div><div>column</div><div>column</div>
<div>column</div><div>column</div><div>column</div>
<div>column</div><div>column</div><div>column</div>

<强> CSS

div {
    width: 200px;
    display: inline-block;
}

HTML表就像`ls`

4 个答案: