Tự động điều chỉnh độ rộng của thẻ th dựa vào dòng nội dung dài nhất trong column đó
Scroll y Table điều chỉnh th bằng Javascript
Html 2017
<!DOCTYPE html>
<html>
<head>
<style>
table.scroll {
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead { display: block; }
thead tr th {
height: 30px;
line-height: 30px;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody { border-top: 2px solid black; }
tbody td, thead th {
border-right: 1px solid black;
/* white-space: nowrap; */ Tự động dàn văn bản k xuống dòng
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
</style>
</head>
<body>
<table class="scroll">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Lorem ipsum dolor sit</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var table = $('table.scroll'), bodyCells = table.find('tbody tr:first').children(),colWidth;
$(window).resize(function() {
colWidth = bodyCells.map(function() {
return $(this).width();
}).get();
table.find('thead tr').children().each(function(i, v) {
//$(v).text() => Head 1 .. Head 2 .. etc
//colWidth[i] => 150 ...
//i => 1 ~ 5
//$(this).css("min-width", colWidth[i]);
$(v).width(colWidth[i]);
});
}).resize();
</script>
</body>
</html>
Run demo 'lưu ý phải kéo đường kẻ ngăn của tool'
0 nhận xét:
Post a Comment