Bootstrap Table

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table data-toggle="table"
       data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/">
    <thead>
    <tr>
        <th data-field="name" data-formatter="trimText">Name</th>
        <th data-field="stargazers_count" data-formatter="trimText">Stars</th>
        <th data-field="description"
            data-formatter="trimText" data-formatter="trimText">Description</th>
        <th data-field="forks_count" data-formatter="trimText">Forks</th>
    </tr>
    </thead>
</table>

CSS

.trim-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}

td:hover {
  overflow: visible;
}

.trim-text:hover {
  position:absolute;
  padding: 8px;
  left: 0;
  top: 0;
  width: 100%;
  white-space: normal;
  background-color: #f00;
  z-index: 100; 
}

table {
    table-layout: fixed;
    word-wrap: break-word;
    }

JavaScript

function trimText(value) {
    return '<div class="trim-text">' + value + '</div>';   
}