Labels

php (34) javascript (30) phpjavascript (29) jquery (23) html (19) 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:



2 comments:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

    ReplyDelete

More Posts

FOLLOW