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:



1 comment:

  1. My friend suggested I may like this web site. He used to be entirely right.
    This submit actually made my day.

    ReplyDelete

More Posts

FOLLOW