Question

我一直在尝试显示需要将列标题旋转的表格，以及在用户向下滚动时保持在页面顶部 。我可以让它工作，但问题是列的宽度。我认为我的CSS存在问题。滚动标题使用单独的JS文件。

这就是我的页面目前的样子。我对不同的元素进行了着色，因此我可以很容易地证明这个问题

列标题文本（下面的绿色部分）位于div中，并带有名为rotating_text的类。单元格（下面的红色部分）有一个名为rotate_cell的类。

问题在于我似乎无法使列的宽度缩小并适合其中的值（绿色部分），并且我无法使绿色部分一直延伸到单元格（如您所见，某些值位于两个“行”上）。

我希望输出是这样的（使用Excel文件完成，但通常我喜欢看它）：

我的代码如下：

.normalHeadingText {
  padding: 2px;
  text-align: center;
}

 .rotated_text {
	 -moz-transform:rotate(-90deg); 
	 -moz-transform-origin: top left;
	 -webkit-transform: rotate(-90deg);
	 -webkit-transform-origin: top left;
	 -o-transform: rotate(-90deg);
	 -o-transform-origin:  top left;
	  position:relative;
 	text-align: left;
	 top:20px;
 	width:100px;
	 padding: 0px 0px 0px 0px;
	 background-color:#A1D490;
 }

 .rotated_cell {
	 height:250px;
	 vertical-align:bottom;
	 padding: 0px 0px 10px 0px;
   background-color:#D4A190;
}
  
th, td 
  {
	  border: 1px solid #888888;
	  /*width: 20px;*/
  }

  


.columnHeadingNormal {
	font-weight: bold;
	border: 1px solid black;
}

.cellNormal {
	border: 1px solid #888888;
}

.cellNameSize {
	width:230px;
}


.reportTable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0px;

	
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Report</title>
</head>
<body>
	<h1>Title</h1>
	<table class='reportTable'>
		<thead>
			<tr class='header'>
				<th class='columnHeadingNormal cellNameSize'>Name</th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Allcorn,
						Mason</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Armstrong,
						Bree</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Barmby,
						Matthew</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Barnett,
						Brydon</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Bartlett,
						Patrick</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Bell,
						Chris</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Benson,
						Oliver</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Bisinella,
						Tiana</div></th>
				
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Bowen,
						Joshua</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Brayshaw,
						James</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Brew,
						Alana</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Brogden,
						Bailey</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Buckley,
						Matthew</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Burns,
						Hayden</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Cain,
						Jack</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Cannard,
						Patrick</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Crapper,
						Josh</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Davison,
						Olivia</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Dean,
						Darryl</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Debeljuh,
						Natalie</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Dickson,
						Eric</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Doolan,
						Briane</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Draper,
						Flynn</div></th>
				
			</tr>

		</thead>
		<tbody>
			<tr>
				<td class='cellNormal'>Johnstone, William</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>


				
				
			</tr>
			<tr>
				<td class='cellNormal'>Johnstone, William</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
			</tr>
			<tr>
				<td class='cellNormal'>Johnstone, William</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
			</tr>
			<tr>
				<td class='cellNormal'>Johnstone, William</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
			</tr>
			
		</tbody>
	</table>

	<br />
	<br />
	<br />

</body>
</html>

有人能指出我的CSS / HTML出错吗？

Answer 1

您必须将文字设置为position: absolute;并删除top: 20px;。我还添加了height: 7%;

＆＃13;

.normalHeadingText {
  padding: 2px;
  text-align: center;
}

 .rotated_text {
	 -moz-transform:rotate(-90deg); 
	 -moz-transform-origin: top left;
	 -webkit-transform: rotate(-90deg);
	 -webkit-transform-origin: top left;
	 -o-transform: rotate(-90deg);
	 -o-transform-origin:  top left;
	  position:relative;
 	text-align: left;
 	width:100px;
	 padding: 0px 0px 0px 0px;
	 background-color:#A1D490;
     position: absolute;
     height: 7%;
 }

 .rotated_cell {
	 height:250px;
	 vertical-align:bottom;
	 padding: 0px 0px 0px 0px;
   background-color:#D4A190;
}
  
th, td 
  {
	  border: 1px solid #888888;
	  /*width: 20px;*/
  }

  


.columnHeadingNormal {
	font-weight: bold;
	border: 1px solid black;
}

.cellNormal {
	border: 1px solid #888888;
}

.cellNameSize {
	width:230px;
}


.reportTable {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0px;

	
}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Report</title>
</head>
<body>
	<h1>Title</h1>
	<table class='reportTable'>
		<thead>
			<tr class='header'>
				<th class='columnHeadingNormal cellNameSize'>Name</th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Allcorn,
						Mason</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Armstrong,
						Bree</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Barmby,
						Matthew</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Barnett,
						Brydon</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Bartlett,
						Patrick</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Bell,
						Chris</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Benson,
						Oliver</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Bisinella,
						Tiana</div></th>
				
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Bowen,
						Joshua</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Brayshaw,
						James</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Brew,
						Alana</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Brogden,
						Bailey</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Buckley,
						Matthew</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Burns,
						Hayden</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Cain,
						Jack</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Cannard,
						Patrick</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Crapper,
						Josh</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Davison,
						Olivia</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Dean,
						Darryl</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Debeljuh,
						Natalie</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Dickson,
						Eric</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Doolan,
						Briane</div></th>
				<th class='rotated_cell' colspan='1'><div class='rotated_text'>Draper,
						Flynn</div></th>
				
			</tr>

		</thead>
		<tbody>
			<tr>
				<td class='cellNormal'>Johnstone, William</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>


				
				
			</tr>
			<tr>
				<td class='cellNormal'>Johnstone, William</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
			</tr>
			<tr>
				<td class='cellNormal'>Johnstone, William</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
			</tr>
			<tr>
				<td class='cellNormal'>Johnstone, William</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
				<td class='cellNormal'>0</td>
			</tr>
			
		</tbody>
	</table>

	<br />
	<br />
	<br />

</body>
</html>

＆＃13;

Answer 2

尝试在.rotated_text类中将宽度设置为100％，将高度设置为100％...

CSS - 滚动时列标题旋转以及固定标题

2 个答案: