Column width not working properly using display:table-column; and white-space:nowrap;

Question

I have a table of divs using display: column; width: 100px;

The cells are using display: table-cell; white-space: nowrap; overflow: hidden; because I always want the data to be on the same row and if it's too long it should be cut off.

Here is a 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;
}

The table is acting like it should until the data is longer than 200px. I could solve this by setting max-width: 200px; on the cell. However the width is a dynamic value from the server and I don't want to render this unnecessary data for every cell in the style-attribute.

Is it possible to write my columns in a way to solve this?

One more strange thing, If I set max-width: 0px; in a style attribute on the cell with very long data it renders as 200px! Can someone explain that?

Answer 1

I think this is what your asking, let me know if I'm wrong.

set the [max-width] to whatever you want then set [overflow:scroll]

//CSS BLOCK

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

Answer 2

Have you tried clipping the string at the source level. If this is an SQL query (etc) from the database, why not just ask for less?

You could also use the javascript .substring() function to clip the text.

<div id="text_display"></div>
<script>
var content = "Hello world!";
document.getElementById("text_display").innerHTML = content.substring(0, 6);;
</script>

If you want to go the route of clipping in the table itself try using div instead of span. Applying the style I used to the span tag didn't clip. It would also seem that anything acting like a table component adheres to its limitations. I have yet to find how to clip table cells nicely. Wrapping the content then in the div tag gives the clipping that you desire. At this point however, if you really are displaying tabular data you might want to go the route of the table with div tags inside each td on the cells that need clipping.

HTML:

    <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="table">
        <div class="row">
            <div class="cell"><div>a sdf</div></div>
            <div class="cell"><div>as dlfk jas dofj </div></div>
            <div class="cell"><div>as klödfjasdfj asöldfjk as</div></div>
            <div class="cell"><div>a sdf</div></div>
        </div>
        <div class="row">
            <div class="cell"><div>a sdf</div></div>
            <div class="cell"><div>as dlfk jas dofj </div></div>
            <div class="cell"><div>as klödfjasdfj asöldfjk </div></div>
            <div class="cell"><div>a sdf</div></div>
        </div>
        <div class="row">
            <div class="cell"><div>a sdf</div></div>
            <div class="cell"><div>as dlfk jas dofj </div></div>
            <div class="cell"><div>kludd as klödfjasdfj asöldfjkaskj fhalksfh alskdfhak dfhaslkfhasldfh asklh aslkdfh asklfh</div></div>
            <div class="cell"><div>a sdf</div></div>
        </div>
        <div class="row">
            <div class="cell"><div>a sdf</div></div>
            <div class="cell"><div>as dlfk jas dofj </div></div>
            <div class="cell"><div>as klödfjasdfj asöldfjk </div></div>
            <div class="cell"><div>a sdf</div></div>
        </div>
    <div>
    <div>

CSS:

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

.row{
    display:table-row;
}

.cell{
    display:table-cell;
    border-right:1px solid;
}
.cell:last-of-type{
    border:0;
}

.cell div {
    white-space:nowrap;
    overflow:hidden;
    width:50px;
    background:lightblue;
}
.row div:nth-child(3) div {
    background:white;
    width:200px;
}