CODEWITHSUNDEEP
csstwitter-bootstraphtml-table
mnt
mnt

Reputation: 94

Sized table with at most one line of content per cell with Bootstrap 3

I'm trying to display a table (with given column width using Bootstrap's col-md-X) with at most one line of (text) content per cell. Refer to the last example in my jsfiddle for an example of what I'd want.

I use this oneliner css class to limit the amount of text displayed :

.oneliner {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

I have two issues:

JSFiddle here : http://jsfiddle.net/85TjP/2/ (updated)

I would really like to avoid using js for this.

Upvotes: 3

Views: 4634

Answers (2)

mnt
mnt

Reputation: 94

Nevermind, found the solution.

Applying style="table-layout: fixed;" to the table fixes both problems, the final html+css would look like :

CSS

.oneliner {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

HTML

<table class="table" style="table-layout: fixed;">
    <tr>
        <th class="col-md-6">Some title</th>
        <th class="col-md-6">Other title</th>
    </tr>
    <tr>
        <td>Short row</td>
        <td class="oneliner">Much, much longer row, this is so long it's going to overflow</td>
    </tr>
</table>

Of course table-layout : fixed; should be applied via CSS

Upvotes: 1

SW4
SW4

Reputation: 71160

See the below for an example of how this can be accomplished:

Fiddle

Crucially applying the following properties to an element will ensure only one line of text is displayed and it doesnt resize:

white-space: nowrap;
overflow:hidden;

You can use the below for ellipses to appear if any text overflows, for visual purposes only:

text-overflow: ellipsis;

HTML

<div class='table'>
    <div class='row'>
        <div class='cell'>Something quite long</div>
        <div class='cell'>here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.</div>
    </div>
</div>

CSS

.table {
    margin:0;
    padding:0;
    display:table;
    table-layout: fixed;
    width:100%;
    max-width:100%;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}

Upvotes: 2

Related Questions