table row expanding with text

Question

how do i make table rows to be of the exactly same height? whenever the text in the <td> exceeds the limit it exand the row. How do i make it in a way that it don't do that. instead show less text here is the code

<div class="firstDiv" style="width: 200px; height: 200px;">

    <table border="1" style="border-collapse: collapse;">
        <tr style="height: 20px;">
            <th width="33%">First Name</th>
            <th width="33%">Last Name</th>
            <th width="33%">Country Of Origin OR MIG</th>
        </tr>
        <tr>
            <td>Mark</td>
            <td>Hopkins lee brimlow</td>
            <td>Not living in world right now</td>
        </tr>
    </table>
</div>

get td text length and compare it with some value like 50 0r 60 character and then remove rest and show `...` instead of it — Alive to die - Anant, Oct 14 '17 at 04:18
https://stackoverflow.com/questions/17868503/on-css-if-text-line-is-break-show-dots — Alive to die - Anant, Oct 14 '17 at 04:31
You can give fixed height and then use `text-overflow: ellipsis` and `overflow: hidden` — Abhinav Jain, Oct 14 '17 at 05:37

score 1 · Answer 1 · answered Oct 14 '17 at 04:39

As regards multiple related content sections (vis-a-vis table cells) and a concise, "well-manicured" UI, you must have well-formed data or be willing to compromise. Per your question, the implicit assumption is that your data is not well-formed (in the amount-of-text sense) and you are therefore willing to compromise. Two suggestions:

Disallow white space wrapping:
```
td { white-space: nowrap; }
```

Enforce a max-width and make an ellipsis:

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

The key with both of these suggestions is that they lock the height of each td element (and thereby the entire row) to a single text line via the white-space: nowrap.

There are of course other options for a consistent table height, but it's difficult to enumerate them all without a more explicit question.

score 1 · Accepted Answer · answered Oct 14 '17 at 04:43

Try wrapping the text around a div

<div class="firstDiv" style="width: 200px; height: 200px;">

    <table border="1" style="border-collapse: collapse;">
        <tr style="height: 20px;">
            <th width="33%"><div>
            First Name
            </div></th>
            <th width="33%"><div>
            Last Name
            </div></th>
            <th width="33%"><div>
            Country Of Origin OR MIG
            </div></th>
        </tr>
        <tr>
            <td><div>
            Mark
            </div></td>
            <td><div>
            Hopkins lee brimlow
            </div></td>
            <td><div>
            Not living in world right now
            </div></td>
        </tr>
    </table>
</div>

And use height

th div, td div{
  height:40px;
  overflow:auto;
}

https://jsfiddle.net/L2awyezb/

table row expanding with text

2 Answers2