16

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?

Salman A
  • 262,204
  • 82
  • 430
  • 521
Legendary_Hunter
  • 1,040
  • 2
  • 10
  • 29

3 Answers3

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>
Salman A
  • 262,204
  • 82
  • 430
  • 521
  • 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 Aug 29 '18 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 A Aug 29 '18 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: https://jsfiddle.net/kxso85w2/1/ Thanks for the help man! – Francis Bartkowiak Aug 29 '18 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

Anwar
  • 4,162
  • 4
  • 41
  • 62
  • 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 Dec 19 '18 at 07: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>
sanjeev shetty
  • 438
  • 4
  • 17