Variable Sized Column with Ellipsis in a Table

Variable sized column with ellipsis in a table

Is this the desired look: http://jsfiddle.net/Uhz8k/ ? This works in Firefox 21+, Chrome 43+ (probably earlier), and IE11. It doesn't work in IE9. (Don't know about IE10.)

The html code is below:

<table class="table">
    <tr>
        <th>First</th>
        <th>Second</th>
    </tr>
    <tr>
        <td class="expand-column">
            Some long long text here, Some long long text here, Some long long text here,
            Some long long text here, Some long long text here, Some long long text here,
            Some long long text here, Some long long text here, Some long long text here,
            Some long long text here, Some long long text here, Some long long text here.
        </td>
        <td class="no-wrap"> Other text here </td>
    </tr>
    <tr>
        <td class="expand-column">
            Some other long text here, Some other long text here, Some other long text here,
            Some other long text here, Some other long text here, Some other long text here,
            Some other long text here, Some other long text here, Some other long text here,
            Some other long text here, Some other long text here, Some other long text here.
        </td>
        <td class="no-wrap"> Some other text here </td> 
    </tr>
</table>

and the CSS:

.table {
  width: 100%;
  border: 1px solid grey; 
}

.expand-column {
    max-width: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid grey;
}

.no-wrap {
  white-space: nowrap;
  border: 1px solid grey;
  width: 1px;
}

th {
    border: 1px solid grey;
}

css: how to have a variable column size with text overflow ellipsis

Finally got this to work... The solution was (no html change was required):

http://jsfiddle.net/AjZDx/2/

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    min-width: 20px;
    width: 120px;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

ul > li > div {
    display: table;
    border-spacing: 0px 0px;
    table-layout: fixed;
    width: 100%;
}

ul > li > div > span {
    display: table-cell;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

How can I use ellipses in a fluid width table without making each column the same size?

It should work if you specify a max-width for td.ellipsis.

Equal but dynamically-sized columns with overflow ellipsis

CSS grid will probably do a better job here:

div.outer {
  display: inline-grid; /* fit content */
  grid-auto-flow:column;
  grid-auto-columns:1fr; /* equal column */
  max-width:100%; /* don't go beyond full width */
  margin:10px;
}
div.outer > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly longer text which is almost certainly going to overflow at some point, and which probably should be some lorem ipsum instead.</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>

<div class="outer">
  <div style="background-color: tan">Some text</div>
  <div style="background-color: gold">Some significantly</div>
  <div style="background-color: tan">More text.</div>
  <div style="background-color: gold">Yet more text.</div>
</div>

Text overflow in table with variable size

If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.

For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).

---

EDIT: Fix for Mozilla

Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style

.tables td {
    font-weight: 400;
    font-size: 13px;
    border-bottom: 1px solid #E1E1E1;
    line-height: 38px;
    text-align: right;
    white-space: nowrap;
    max-width: 200px; /* just an example */
}

.tables td > div {
    overflow: hidden;
    width:100%;
    position: relative;
}

.linkFunctions {
    display: none;
    padding-top: 14px;
    position: absolute;
    right: 0;
    z-index: 999;
    background-color: #FFF9DC;
    padding-left: 3px;
    width: 100%;
    max-width: 120px; /* just an example */
    text-overflow: ellipsis;
    overflow: hidden;
}

How to use ellipsis in a table cell?

The missing key is table-layout: fixed.

table {  width: 100%;  table-layout: fixed;}
td {  width: 50%;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}

<table>  <tbody>    <tr>      <td>        48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf      </td>      <td>1/1/0001</td>    </tr>  </tbody></table>

Hide overflow of column with ellipsis, shrink other cols to fit content, don't set any table/col widths, and expand the table to fit within a div

I think this is what you were looking for. Check the snippet.

Edit : Add an absolute positioned div in first column with text-overflow: ellipsis; and fix the width of other columns to 1px or 1% and make them white-space: nowrap;

div {  width: 400px;}
table {  width: 100%;}
td, th {  position: relative;}
tr td:not(:first-child), tr th:not(:first-child){    width:1%;    white-space:nowrap;}
.first-row{  overflow: hidden;  position: absolute;  left: 0;  top: 0;  width: 100%;  white-space: nowrap;  text-overflow: ellipsis;}

<div>  <table border="1">    <tr>      <th><div class="first-row">Header Loooooooooooooooooooooooooooooooooooooooooon</div></th>      <th>First Value</th>      <th>Value</th>      <th>Value</th>    </tr>    <tr>    <td><div class="first-row"> Loooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog text</div></td>      <td>Value two</td>      <td>Value</td>      <td>Value</td>    </tr>    <tr>    <td><div class="first-row">Second Loooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog text</div></td>      <td>Value</td>      <td>Value</td>      <td>Value</td>    </tr>    <tr>    <td><div class="first-row">Third Loooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog text</div></td>      <td>Value</td>      <td>Value</td>      <td>Value</td>    </tr>  </table></div>

Fixed width table with second column dynamic width and ellipsis

Like I mention in the comments, it can be achieved using flex-box.

• .parent has display: flexbox
• Column 1 has white-space: nowrap to make it fit its content.
• Column 2 has flex-grow so it will take all the remain space.

.parent {  display: flex;  width: 350px;  border: 1px solid;}
.header {  text-align: center;  font-weight: bold;  border-bottom: 1px solid;}
.parent > div:first-child {  white-space: nowrap;  border-right: 1px solid;}
.parent > div:last-child {  flex-grow: 1;}
.parent div:last-child {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
.parent > div > div {  padding: 1px;}

<div class="parent">  <div>    <div class="header">Column1</div>    <div>Display in full</div>  </div>  <div>    <div class="header">Column 2</div>    <div>Ellipsis this if length is too long</div>  </div></div>

CSS text-overflow in a table cell?

To clip text with an ellipsis when it overflows a table cell, you will need to set the max-width CSS property on each td class for the overflow to work. No extra layout div elements are required:

td
{
 max-width: 100px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

For responsive layouts; use the max-width CSS property to specify the effective minimum width of the column, or just use max-width: 0; for unlimited flexibility. Also, the containing table will need a specific width, typically width: 100%;, and the columns will typically have their width set as percentage of the total width

table {width: 100%;}
td
{
 max-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
td.column_a {width: 30%;}
td.column_b {width: 70%;}

Historical: For IE 9 (or less) you need to have this in your HTML, to fix an IE-specific rendering issue

<!--[if IE]>
<style>
table {table-layout: fixed; width: 100px;}
</style>
<![endif]-->

---

Related Topics