Geek asks and answers

Size table with at most one row of content per cell with Bootstrap 3

I am trying to display a table (with a given column width using Bootstrap col-md-X) containing no more than one row of (text) content per cell. Refer to the last example in my jsfiddle for an example of what I 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 problems:

  • When the text in the cell is too long, it breaks the size that I set. It can be fixed using a custom size class instead of bootstrap, but I would prefer not to use this method, since the sizes of the columns vary from col-md-1to col-md-12in production tables, and also do not solve the following problem: / li>
  • When applying mine, .oneliner classit puts all the text on one line, stretching the parent element (even with my custom size class), an event if I apply to <span>or <p>inside mine <td>.

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

I would really like to avoid using js for this.

+3
source share
2 answers

The following is an example of how this can be done:

Fiddle

Regarding the application of the following properties to an element, only one line of text will be displayed, and it does not resize:

white-space: nowrap;
overflow:hidden;

You can use below to display ellipses if any text is overflowing 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;
}
+2
source

Nevermind, found a solution.

style="table-layout: fixed;" , html + css :

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 going to overflow</td>
    </tr>
</table>

, table-layout : fixed; CSS

+1

More articles:


All Articles