代码在家中完成：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
<style type="text/css">
.dataDiv {
overflow-x: hidden;
overflow-y: auto;
}
</style>
</head>
<body>
<div style="width: 400px;overflow-y: hidden;" id="table-out">
<div>
<table style="width: 400px;table-layout: fixed;">
<colgroup>
<col style="width: 150px;">
<col style="width: 250px;">
<col style="width: 250px;">
<col style="width: 250px;">
<col style="width: 17px">
</colgroup>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div style="height: 200px;" class="dataDiv" id="table-size">
<table style="width: 400px;table-layout: fixed;">
<colgroup>
<col style="width: 150px;">
<col style="width: 250px;">
<col style="width: 250px;">
<col style="width: 250px;">
</colgroup>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
window.onload = function() {
var container = document.querySelector('#table-out');
var intable = document.querySelector('#table-size');
container.addEventListener('scroll', function() {
intable.style.width = container.clientWidth + container.scrollLeft + 'px';
console.log(intable.style.width);
});
}
</script>
</body>
</html>
扫一扫
7096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
