Using ellipsis inside table

Question

In the code, I'm trying to keep the table inside the div. The table has a width of 100% inside a 100px div.

The problem is the content stretches regardless. What is the best way to handle this?

#container {
  width: 100px;
  border: 1px solid green;
  }

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

table div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 10px);
  }

<div id="container">
<table>
  <tr>
    <td>1</td>
    <td><div>abcdefghijklmnopqrstuvwxyzyxwvutsrqponmlkjihgfedcba</div>
    </td>
  </tr>
</table>
</div>

According to the above link.. here is the [fiddle](https://jsfiddle.net/venkateshwar/o1bvr62m/) — Mr_Green, Sep 14 '16 at 05:40
The thing to remember is that tables work very hard to display everything in them, even if that means bending the rules to do so. For instance, `table {width:100%}` is ignored if 100% isn't enough. So if you don't actually _need_ a table, try to do without. The example in the question looks more like an ordered list than a table. — Mr Lister, Sep 14 '16 at 06:09
Please check this link:-http://stackoverflow.com/questions/30588175/contenteditable-div-in-a-table-cell-with-text-ellipsis-not-working-in-ie11 — Razia sultana, Sep 14 '16 at 06:21

score 0 · Answer 1 · answered Sep 14 '16 at 04:49

0

try using

table-layout:fixed;

to table

or

td { 
 display:block;
 }

http://jsfiddle.net/fd3Zx/5/

answered Sep 14 '16 at 04:49

thedudecodes

1,479
1
16
37

The whole purpose of using `td` will be lost if we add `display: block`. – Mr_Green Sep 14 '16 at 05:41

score 0 · Answer 2 · edited May 23 '17 at 12:19

0

Apply

table td {
    max-width: 0px;
}

As suggested in this link.

Working Fiddle

edited May 23 '17 at 12:19

Community

1
1

answered Sep 14 '16 at 05:46

Mr_Green

40,727
45
159
271

Using ellipsis inside table

2 Answers2