Home / Questions / 8107
Accepted
Luis Alberto Aguilera Clarke
Asked: 2020-04-21 05:08:30 +0800 CST 2020-04-21 05:08:30 +0800 CST

That the user can modify the size of a datatable column

  • 772

Is it possible that the cell sizes of a jquery datatable can be modified as the excel tool does?

javascript

1 Answers

  1. Best Answer

    To change the size of the columns you could do it through the jquery ui resizable function , the following example is very basic but it can help you:

    $('table th a').resizable({handles:'e'});
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://fiddle.jshell.net/css/result-light.css"> 
<style type="text/css">
  table th a { display: block; }
  td, th { border: solid; }
</style>

<table>
    <tr>
        <th><a href="#">Col 1</a></th>
        <th><a href="#">Col 2</a></th>
        <th><a href="#">Col 3</a></th>
        <th><a href="#">Col 3</a></th>
    </tr>
    <tr>
        <td>Dato 1</td>
        <td>Dato 2</td>
        <td>Dato 3</td>
        <td>Dato 4</td>
    </tr>
</table>

    • 3