HTML / CSS：使用滚动表格元素移动内容

时间：2017-09-09 20:10:54

标签： html css

我正在构建一个包含1,2,4,8,16 ... 256列的表。（用于家谱概述） 我希望第一行跨越256列，第二行128等......

当然我必须向左和向右滚动。我想要的是当单元格可见时，表格单元格值会滚动。我已经在 td 中尝试了div，但它不起作用。我已将表格添加为示例。 如您所见，该值并不总是可见的。我想要的是这个值（如第1行）在左右滚动的任何地方都可见.... 

 table, th, td {
    border: 1px solid black;
	text-align:Center
}
<html xml:lang="nl" lang="nl">
<head>

</head>
<body>
<table style="width:100%">
<tr>
<td colspan=256>me</td>
</tr>
<tr>
<td colspan=128>parent 1</td><td colspan=128>parent 2</td>
</tr>
<tr>
<td colspan=64>Grandparent 1</td><td colspan=64>Grandparent 2</td><td colspan=64>Grandparent3</td><td colspan=64>Grandparent4</td>
</tr>
<tr>
<td colspan=32>person 1</td><td colspan=32>person 2</td>
<td colspan=32>person 3</td><td colspan=32>person 4</td>
<td colspan=32>person 1</td><td colspan=32>person 2</td>
<td colspan=32>person 3</td><td colspan=32>person 4</td>
</tr>
<tr>
<td colspan=16>person 1</td><td colspan=16>person 2</td>
<td colspan=16>person 3</td><td colspan=16>person 4</td>
<td colspan=16>person 1</td><td colspan=16>person 2</td>
<td colspan=16>person 3</td><td colspan=16>person 4</td>
<td colspan=16>person 1</td><td colspan=16>person 2</td>
<td colspan=16>person 3</td><td colspan=16>person 4</td>
<td colspan=16>person 1</td><td colspan=16>person 2</td>
<td colspan=16>person 3</td><td colspan=16>person 4</td>
</tr>
<tr>
<td colspan=8>person 1</td><td colspan=8>person 2</td>
<td colspan=8>person 3</td><td colspan=8>person 4</td>
<td colspan=8>person 1</td><td colspan=8>person 2</td>
<td colspan=8>person 3</td><td colspan=8>person 4</td>
<td colspan=8>person 1</td><td colspan=8>person 2</td>
<td colspan=8>person 3</td><td colspan=8>person 4</td>
<td colspan=8>person 1</td><td colspan=8>person 2</td>
<td colspan=8>person 3</td><td colspan=8>person 4</td>
<td colspan=8>person 1</td><td colspan=8>person 2</td>
<td colspan=8>person 3</td><td colspan=8>person 4</td>
<td colspan=8>person 1</td><td colspan=8>person 2</td>
<td colspan=8>person 3</td><td colspan=8>person 4</td>
<td colspan=8>person 1</td><td colspan=8>person 2</td>
<td colspan=8>person 3</td><td colspan=8>person 4</td>
<td colspan=8>person 1</td><td colspan=8>person 2</td>
<td colspan=8>person 3</td><td colspan=8>person 4</td>
</tr>
<tr>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
<td colspan=4>person 1</td><td colspan=4>person 2</td>
<td colspan=4>person 3</td><td colspan=4>person 4</td>
</tr>
<tr>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
<td colspan=2>person 1</td><td colspan=2>person 2</td>
<td colspan=2>person 3</td><td colspan=2>person 4</td>
</tr>
</table>
</body>

提前感谢您的帮助

1 个答案:

答案 0 :(得分：0)

如果您可以使用JQuery，可以使用它作为模板来构建代码，我创建了一个while循环，它将运行并插入td标记，每次迭代VideoTitle减少一半。我删除了一些CSS，因为渲染的元素看起来不太好，请使用此代码构建您的用例！

＆＃13;
＆＃13; 
colspan
＆＃13; 
var start = 256;
var step = start;
var elem = $('table#genealogy');
var html= `<tr><td colspan="FILLERNUMBER">
<div id="rel"> 
<div id="center">
<p>me<br>o</p>
</div>
</div>
</td><td colspan="REMAININGNUMBER"></td></tr>`
while(step > 1){
  if(start-step === 0){
    var output = html.replace("FILLERNUMBER", step).replace("REMAININGNUMBER", '\" style=\"display:none;\"');
  }else{
    var output = html.replace("FILLERNUMBER", step).replace("REMAININGNUMBER", start-step);
  }
  elem.append(output);
  step = step/2;
}
＆＃13; 
table, th, td {
    border: 1px solid black;
	text-align:Center
}

#center
{
	left: 50%;
}	
#rel
{
position:relative;
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题