Android Tutorial Website List

<table id="demo-table" class="bordered cellpadding-0 cellspacing-0">
<thead>
<tr>
<th id='column-header-1'>Column Header 1<div id='column-header-1-sizer'></div></th>
<th id='column-header-2'>Column Header 2<div id='column-header-2-sizer'></div></th>
<th id='column-header-3'>Column Header 3<div id='column-header-3-sizer'></div></th>
<th id='column-header-4'>Column Header 4<div id='column-header-4-sizer'></div></th>
<th id='column-header-5'>Column Header 5<div id='column-header-5-sizer'></div></th>
<th id='column-header-6'>Column Header 6<div id='column-header-6-sizer'></div></th>
<th id='column-header-7'>Column Header 7<div id='column-header-7-sizer'></div></th>
<th id='column-header-8'>Column Header 8<div id='column-header-8-sizer'></div></th>
<th id='column-header-9'>Column Header 9<div id='column-header-9-sizer'></div></th>
<th id='column-header-10'>Column Header 10<div id='column-header-10-sizer'></div></th>
<th id='column-header-11'>Column Header 11<div id='column-header-11-sizer'></div></th>
<th id='column-header-12'>Column Header 12<div id='column-header-12-sizer'></div></th>
<th id='column-header-13'>Column Header 13<div id='column-header-13-sizer'></div></th>
<th id='column-header-14'>Column Header 14<div id='column-header-14-sizer'></div></th>
<th id='column-header-15'>Column Header 15<div id='column-header-15-sizer'></div></th>
<th id='column-header-16'>Column Header 16<div id='column-header-16-sizer'></div></th>
<th id='column-header-17'>Column Header 17<div id='column-header-17-sizer'></div></th>
<th id='column-header-18'>Column Header 18<div id='column-header-18-sizer'></div></th>
<th id='column-header-19'>Column Header 19<div id='column-header-19-sizer'></div></th>
<th id='column-header-20'>Column Header 20<div id='column-header-20-sizer'></div></th>
<th id='column-header-21'>Column Header 21<div id='column-header-21-sizer'></div></th>
<th id='column-header-22'>Column Header 22<div id='column-header-22-sizer'></div></th>
<th id='column-header-23'>Column Header 23<div id='column-header-23-sizer'></div></th>
<th id='column-header-24'>Column Header 24<div id='column-header-24-sizer'></div></th>
<th id='column-header-25'>Column Header 25<div id='column-header-25-sizer'></div></th>
</tr>
</thead>
<tbody>
<td>My Data 1</td>
<td>My Data 2</td>
<td>My Data 3</td>
<td>My Data 4</td>
<td>My Data 5</td>
<td>My Data 6</td>
<td>My Data 7</td>
<td>My Data 8</td>
<td>My Data 9</td>
<td>My Data 10</td>
<td>My Data 11</td>
<td>My Data 12</td>
<td>My Data 13</td>
<td>My Data 14</td>
<td>My Data 15</td>
<td>My Data 16</td>
<td>My Data 17</td>
<td>My Data 18</td>
<td>My Data 19</td>
<td>My Data 20</td>
<td>My Data 21</td>
<td>My Data 22</td>
<td>My Data 23</td>
<td>My Data 24</td>
<td>My Data 25</td>
</tbody>
</table>
view raw index.html hosted with ❤ by GitHub

Resizable Table Columns Using jQuery UI

I was having trouble resizing table columns. All of the solution I found would work until my table was larger than my viewport, then they failed. I finally found a (relatively) easy solution with jQuery UI.

A Pen by Chad Armond on CodePen.

License.

view raw resizable-table-columns-using-jquery-ui.markdown hosted with ❤ by GitHub
$(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);
}
});
});
view raw script.js hosted with ❤ by GitHub
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
view raw scripts hosted with ❤ by GitHub
body {
font-family: Arial;
font-size: 10pt;
}
table#demo-table th {
background-color: #006;
color: #fff;
}
table#demo-table th,
table#demo-table td {
white-space: nowrap;
padding: 3px 6px;
}
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;
}
view raw style.css hosted with ❤ by GitHub
view raw styles hosted with ❤ by GitHub

Published by

Unknown's avatar

Nusrat Faria

I Am A Web Developer And A Android Developer. This Is My Personal Blog So Noted My Work For Helping People .

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.