Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Tuesday, February 20, 2018

Resizeable table using javascript and jquery

<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style type="text/css">
 body {
  font-family: Arial;
  font-size: 10pt;
  padding:20px;
 }
table#demo-table th {
  background-color: red;
  color: #fff;
  }
  table#demo-table th,
  table#demo-table td {
    white-space: nowrap;
    padding: 13px 10px;
   }
  table.cellpadding-0 td {
  padding: 0;
 }
 table.cellspacing-0 {
  border-spacing: 0;
  border-collapse: collapse;
 }
table.bordered th,
table.bordered td {
border: 1px solid #ccc;
border-right: none;
text-align: center;
  }
table.bordered th:last,
table.bordered td:last {
border-right: 1px solid #ccc;
 }
</style>
<script>
$(function() {
var thHeight = $("table#demo-table th:first").height();
$("table#demo-table th").resizable({
    handles: "e",
    minHeight: thHeight,
    maxHeight: thHeight,
    minWidth: 40,
    resize: function (event, ui) {
    var sizerID = "#" + $(event.target).attr("id") + "-sizer";
    $(sizerID).width(ui.size.width);
                }
   });
});
</script>
</head>
<body>
<table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
    <thead>
    <tr>
        <th id='column-header-1'>S.No<div id='column-header-1-sizer'></div></th>
        <th id='column-header-2'>Subject<div id='column-header-2-sizer'></div></th>
        <th id='column-header-3'>Total Marks<div id='column-header-3-sizer'></div></th>
        <th id='column-header-4'>Gain<div id='column-header-4-sizer'></div></th>
        <th id='column-header-5'>Rank<div id='column-header-5-sizer'></div></th>
</tr>
    </thead>
    <tbody>
    <td>0001</td>
    <td>English</td>
    <td>100</td>
    <td>79</td>
    <td>13</td>
</tbody>
</table>

</body>

</html>
Result:



More Posts

FOLLOW