Question

我想构建一个包含两列（和一行）和特定宽度的表。左侧单元格将包含应为单行和自动省略号的文本。正确的单元格应该具有动态内容，可以自动增大右侧单元格的宽度，从而缩小左侧单元格的宽度。

使用display: table/table-cell的div / css解决方案很糟糕，因为它会使两个单元格都达到50％。

div fiddle

raw-table / css解决方案也很糟糕，因为white-space: nowrap（text-overflow所需）会破坏表的自动布局机制，甚至会使其超过原始宽度。

table fiddle

有人可以解开这个神秘的谜团吗？ BR，丹尼尔

Answer 1

据我所知this is the closest you'll get，你列出的要求很遗憾不会解决 - 你需要在至少一个容器上设置一个宽度，或者求助于使用一些JS所以要点他们知道停止扩张。

HTML：

<div>
   <span>Something quite long that should exceed the table cell.</span> 
   <span>here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.</span>
</div>

CSS：

div{
    margin:0;
    padding:0;
    display:table;
    table-layout: fixed;
    width:100%;
    max-width:100%;
}
span{
    padding 0 20;
    margin:0;
    display:table-cell;
    border:1px solid grey;
}
span:first-child{
     white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;    
}
span:last-child{
    width:auto;
}

使用white-space的动态表：nowrap

1 个答案: