CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 607

Dynamic Table using white-space: nowrap

I'd like to build a table with two columns (and one row) and specific width. The left cell will contain a text that should be single-line and auto-ellipsis. The right cell should have dynamic content which automagically grows the right cell's width and therefore shrinks the left cell's width.

The div/css solution with display: table/table-cell is bad, since it makes both cells 50% wide.

div fiddle

The raw-table/css solution is also bad, since white-space: nowrap (needed for the text-overflow) breaks the tables automatic layout mechanism and even grows it over its original width.

table fiddle

Can somebody solve the mysterical mystery? BR, Daniel

Upvotes: 2

Views: 3885

Answers (1)

SW4
SW4

Reputation: 71170

As far as I'm aware this is the closest you'll get, the requirements you list unfortunately wont resolve - you will need to set a width on at least one of the containers, or resort to using some JS so the point at which to stop expanding is known to them.

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;
}

Upvotes: 2

Related Questions