html - 使用显示 :table-column; and white-space:nowrap; 时列宽无法正常工作

Question

我有一个 div 表，使用 display: column;宽度:100px;

单元格正在使用 display: table-cell;空白:nowrap； overflow: hidden; 因为我总是希望数据在同一行，如果太长就应该被截断。

这是一个jsfiddle .

        <div class="table">
        <div class="column1" style="display:table-column;width:50px;overflow:hidden;"></div>
        <div class="column2" style="display:table-column;width:50px;overflow:hidden;"></div>
        <div class="column3" style="display:table-column;width:200px;overflow:hidden;"></div>
        <div class="column4" style="display:table-column;width:50px;overflow:hidden;"></div>
        <div class="row">
            <div class="cell"><span>a sdf</span></div>
            <div class="cell"><span>as dlfk jas dofj </span></div>
            <div class="cell"><span>as klödfjasdfj asöldfjk as</span></div>
            <div class="cell"><span>a sdf</span></div>
        </div>
        <div class="row">
            <div class="cell"><span>a sdf</span></div>
            <div class="cell"><span>as dlfk jas dofj </span></div>
            <div class="cell"><span>as klödfjasdfj asöldfjk </span></div>
            <div class="cell"><span>a sdf</span></div>
        </div>
        <div class="row">
            <div class="cell"><span>a sdf</span></div>
            <div class="cell"><span>as dlfk jas dofj </span></div>
            <div class="cell"><span>kludd as klödfjasdfj asöldfjkaskj fhalksfh alskdfhak dfhaslkfhasldfh asklh aslkdfh asklfh</span></div><!-- Add this to the cell: style="max-width:0px;"-->
            <div class="cell"><span>a sdf</span></div>
        </div>
        <div class="row">
            <div class="cell"><span>a sdf</span></div>
            <div class="cell"><span>as dlfk jas dofj </span></div>
            <div class="cell"><span>as klödfjasdfj asöldfjk </span></div>
            <div class="cell"><span>a sdf</span></div>
        </div>
    <div>

.table{
    display:table;
    table-layout:fixed;
    border:1px solid;
}

.row{
    display:table-row;
}

.cell{
    display:table-cell;
    border-right:1px solid;
    white-space:nowrap;
    overflow:hidden;
}

.cell:last-of-type{
    border:0;
}

.cell span{
    text-overflow:ellipsis;
}

在数据超过 200 像素之前，表格会正常运行。我可以通过在单元格上设置 max-width: 200px; 来解决这个问题。但是，宽度是来自服务器的动态值，我不想为样式属性中的每个单元格呈现这些不必要的数据。

是否可以通过编写专栏来解决这个问题？

还有一件奇怪的事， 如果我在具有非常长数据的单元格的样式属性中设置 max-width: 0px;，它会呈现为 200px!谁能解释一下？

Answer 1

我想这就是你的问题，如果我错了请告诉我。

将 [max-width] 设置为任何你想要的然后设置 [overflow:scroll]

//CSS block

.cell {
    display:table-cell;
    border-right:1px solid;
    white-space:nowrap;
    overflow:scroll;
    border: 1px solid;
    max-width: 200px;
}