Menu
I have a table html table which has a column named "address". The address contains very long strings. What I want is I only want to show first 2 or 3 words of the address and when I hover over it, it should show full address. How can I do this with html table?
686
To fix this problem, avoid using vw for your max-width and use a max-width of 100% instead. This will transfer the width of the parent container to the width of the child container.
It is possible to have ellipsis defined in CSS and it works for all browsers. Add the below CSS style to your HTML element. white-space: nowrap; width: 150px; overflow: hidden; text-overflow: ellipsis; Along with ellipsis overflow , width and white-space property is required.
There are two methods to wrap table cell <td> content using CSS which are given below: Using word-wrap property: This property is used to allow long words to break and wrap onto the next line. Using word-break property: This property is used to specify how to break the word when the word reached at end of the line.
Solution:
table-layout: fixed so that your table columns maintain fixed size/*
* fixed table layout
*/
table {
table-layout: fixed;
width: 400px;
font: larger monospace;
border-collapse: collapse;
}
th:nth-child(1) {
width: 20%;
}
th:nth-child(3) {
width: 20%;
}
/*
* inline-block elements expand as much as content, even more than 100% of parent
* relative position makes z-index work
* explicit width and nowrap makes overflow work
*/
div {
display: inline-block;
position: relative;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
/*
* higher z-index brings element to front
* auto width cancels the overflow
*/
div:hover {
z-index: 1;
width: auto;
background-color: #FFFFCC;
}<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td><div>John Smith</div></td>
<td><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></td>
<td><div>1-234-567890</div></td>
</tr>
<tr>
<td><div>Jane Doe</div></td>
<td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
<td><div>1-234-567890</div></td>
</tr>
</tbody>
</table>
.cell {
max-width: 50px; /* tweak me please */
white-space : nowrap;
overflow : hidden;
}
.expand-small-on-hover:hover {
max-width : 200px;
text-overflow: ellipsis;
}
.expand-maximum-on-hover:hover {
max-width : initial;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th>
ID
</th>
<th>
Adress
</th>
<th>
Comment
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td class="cell expand-maximum-on-hover">
A very, very long adress that cannot be showed entirely
</td>
<td class="cell expand-small-on-hover">
A very, very long comment to add more information to the row it belongs to.
</td>
</tr>
</tbody>
</table>You might begin from there, this is an example of how to use max-width combined with overflow : hidden.
Pass hover the adress cell to see the result
35
Using Tootips gives a solution,
<html>
<table border="1" >
<tr>
<td>A</td>
<td><abbr title="Ab df df dfdf df dfdkjf sdfk dfdf">Ab df df</abbr> </td>
</tr>
<tr>
<td>B</td>
<td><abbr title="Bb df df dfdf df dfdkjf sdfk dfdf">Bb df df</abbr> </td>
</tr>
</table>
</html>
answered Oct 24 '22 08:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With