<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:
<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:
