File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
​
        
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
​
          </li>
        </ul>
      </div>
    </nav>
​
    <h1>Hello, world!</h1>
​
​
    <table id="example" class="display" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
          <th>Salary1</th>
          <th>Salary2</th>
          <th>Salary3</th>
          <th>Salary4</th>
          <th>Salary5</th>
          <th>Salary6</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$3,120</td>
          <td>$73,120</td>
        
        <td>$32,120</td>
          <td>$43,120</td>
          <td>$33,120</td>
          <td>$63,120</td>
          <td>$83,120</td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Director</td>
          <td>Edinburgh</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$5,300</td>
          <td>$55,300</td>
          <td>$75,300</td>
          <td>$85,300</td>
          <td>$45,300</td>
          <td>$75,300</td>
          <td>$75,300</td>
        </tr>
​
      </tbody>
    </table>
​
    </div>
  </body>
</html>
CSSSaved
 
table {
  table-layout: fixed;
}
​
.my_elipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
​
.my_elipsis:hover {
  overflow: visible;
  white-space: normal;
  height: auto;
}
​
JavaScriptSaved
 
$(document).ready( function () {
  var table = $('#example').DataTable({
    columnDefs: [{targets: '_all',
                          render:function(data,type,row) {
                            console.log(data)
;              return "<div class=my_elipsis>" + data + "</div>";}
          },
{
          "width": "5%",
          "targets": [5, 6, 7, 8, 9, 10, 11]
        }, {
          "width": "10%",
          "targets": [1, 2, 3]
        }                 
                 ]
​
  });
} );
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers