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?

score 0 · Answer 1 · answered Dec 22 '14 at 16:56

0

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

answered Dec 22 '14 at 16:56

Jordan Davis

1,485
7
21
40

This will work for this simplified example, but the width is set by the server. Maybe I could render this from the server, but it will be very tricky since it can be multiple tables with different widths at the page. – P Lysenius Dec 22 '14 at 17:00
I mean you should set max-width and scoll like in the above example or you could make the columns resizable so you can drag to expand them. – Jordan Davis Dec 22 '14 at 17:13
Aha, but I don't want scrolls. If the content of cells is too big. I want it to be hidden. – P Lysenius Dec 23 '14 at 08:22

score 0 · Answer 2 · answered Aug 29 '15 at 22:17

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

Cutting the text at the backend or with JS is not an option in my case. I need the data on the client. Also cutting text would be an estimation of the width since letters are of different widths. I'm looking for a pure CSS solution. — P Lysenius, Aug 30 '15 at 12:51

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

2 Answers2