17

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?

Improve this question
2
  • 1
    show us code or demo or else how can we help!!
    – Leo the lion
    Commented Jul 28, 2015 at 7:28
  • For your first request, use css overflow: hidden; or text-overflow: ellipsis;. I'll try your second request (display it on hover)
    – Hearner
    Commented Jul 28, 2015 at 7:33

3 Answers 3

Reset to default
18

Solution:

  • Use table-layout: fixed so that your table columns maintain fixed size
  • Wrap the content inside div elements and manipulate width and overflow properties

/*
 * 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>

Improve this answer
3
  • This answer is great, but I'm working with table items that are very long strings, and so when you hover over them, the text goes way off screen. Is there a way to have the text stay in it's "column" and grow height-wise as opposed to width-wise? I've tried playing around with this CSS to make it do just that, but CSS isn't exactly my forte.
    – Francis Bartkowiak
    Commented Aug 29, 2018 at 12:45
  • 1
    I can't test right now, but one trick is to change the white-space: nowrap to white-space: normal on hover. There should be side effects but hopefully you (or someone else) might work around them.
    – Salman Arshad
    Commented Aug 29, 2018 at 13:54
  • 2
    I'm not worried about the side effects at all. That was exactly what I needed. Made a JSFiddle to test it out if anyone happens by and is looking for something similar: jsfiddle.net/kxso85w2/1 Thanks for the help man!
    – Francis Bartkowiak
    Commented Aug 29, 2018 at 15:50
12 

.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

Improve this answer
1
  • It works, but the cell is expanding too much that I need to drag the cell content with mouse to the right to view the full text
    – Suresh
    Commented Dec 19, 2018 at 7:54
8

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>

Improve this answer
2
  • add css-rule: text-decoration: unset in order to remove the dots
    – Duc Dat Nguyen
    Commented Jan 15, 2020 at 13:51
  • Thats correct. The dots supposed to be there to show the text is partial and you can hover it to see it. So, no need of the css rule in this case.
    – sanjeev shetty
    Commented Mar 2, 2020 at 10:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.