当我仅为body设置滚动时，标题未与body表对齐。还为身体设置了滚动但它已被禁用。
这是html代码：
</td>
</tr>
<tr class="mwp_Row1">
<td colspan="4" align="right">
<input type="button" name="Close" value="Close" onclick="javascript:window.close()" class="button">
</td>
</tr>
</table>
<div style="overflow-y: hidden; overflow-x: hidden;">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr class="mwp_titleBand">
<td class=rotate align="center"><div align="center">Service Date</div></td>
<td class=rotate align="center"><div align="center">New/Old Data</td>
<td class=rotate align="center"><div align="center">Accom Code</div></td>
<td class=rotate align="center"><div align="center">Room Code</div></td>
<td class=rotate align="center"><div align="center">Rate Code</div></td>
<td class=rotate align="center"><div align="center">Block Inv Count</div></td>
<td class=rotate align="center"><div align="center">Block Alot Count</div></td>
<td class=rotate align="center"><div align="center">Book Count</div></td>
<td class=rotate align="center"><div align="center">Hold Count</div></td>
<td class=rotate align="center"><div align="center">BlockInv Wash Factor</div></td>
<td class=rotate align="center"><div align="center">Bk Blk Impact Count</div></td>
<td class=rotate align="center"><div align="center">PrntBrw Impact Count</div></td>
<td class=rotate align="center"><div align="center">System Created</div></td>
<td class=rotate align="center"><div align="center">Modification Type</div></td>
</tr>
</table>
</div>
<div style="overflow-y: scroll;">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr class="mwp_Row1" align="center">
<td align="center">04-AUG-16</td>
<td align="center"><strong>New Data</strong></td>
<td align="center">1C</td>
<td align="center">CQ</td>
<td align="center">GRP</td>
<td align="center">2</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td></td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">1C</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">05-AUG-16</td>
<td align="center"><strong>New Data</strong></td>
<td align="center">1C</td>
<td align="center">CQ</td>
<td align="center">GRP</td>
<td align="center">2</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td></td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">1C</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">06-AUG-16</td>
<td align="center"><strong>New Data</strong></td>
<td align="center">1C</td>
<td align="center">CQ</td>
<td align="center">GRP</td>
<td align="center">2</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td></td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">1C</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">07-AUG-16</td>
<td align="center"><strong>New Data</strong></td>
<td align="center">1C</td>
<td align="center">CQ</td>
<td align="center">GRP</td>
<td align="center">2</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td></td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">1C</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">08-AUG-16</td>
<td align="center"><strong>New Data</strong></td>
<td align="center">1C</td>
<td align="center">CQ</td>
<td align="center">GRP</td>
<td align="center">2</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center">0</td>
<td align="center"></td>
</tr>
<tr class="mwp_Row1" align="center">
<td></td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">1C</td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
下面还有小提琴：
http://jsfiddle.net/k2zo7msg/4/
我希望标题被修复...并且主体有滚动条我还希望标题表与主体表对齐（如果你现在看不到它）。滚动条在身体上也不起作用。
答案 0 :(得分：0)
好吧，您可以使用position: absolute和position: relative进行对齐：
答案 1 :(得分：0)
我已使用-webkit-flex和table:fixed属性来修复标题...请查看以下代码以获取更多详细信息，或者您也
<强> CSS
#constrainer {
border: 1px solid lightgrey;
width: 100%;
height: 300px;
}
.scrolltable {
overflow: auto;
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.scrolltable > .body {
width: -webkit-fit-content;
overflow-y: scroll;
flex: 1;
-webkit-flex: 1;
width:100%;
}
table{
table-layout:fixed;
}
.rotate {
/* Something you can count on */
height: 140px;
white-space: nowrap;
font-weight:normal;
}
th.rotate > div {
transform:
/* Magic Numbers */
translate(2px, 41px)
/* 45 is really 360 - 45 */
rotate(270deg);
width: 30px;
margin-left:-12px;
}
.mwp_titleBand {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
background-color: #ccccff;
}
.mwp_Row1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
background-color: #eaeaea;
height: 21px;
}
th + th {
border-left: 1px solid #eee;
}
<强> HTML
<div id="constrainer">
<div class="scrolltable">
<table class="header" border="0" cellpadding="0" cellspacing="0" width="98%">
<thead>
<tr class="mwp_titleBand">
<th class="rotate" align="center"><div >Service Date</div></th>
<th class="rotate" align="center"><div >New/Old Data</div></th>
<th class="rotate" align="center"><div >Accom Code</div></th>
<th class="rotate" align="center"><div >Room Code</div></th>
<th class="rotate" align="center"><div >Rate Code</div></th>
<th class="rotate" align="center"><div >Block Inv Count</div></th>
<th class="rotate" align="center"><div >Block Alot Count</div></th>
<th class="rotate" align="center"><div >Book Count</div></th>
<th class="rotate" align="center"><div >Hold Count</div></th>
<th class="rotate" align="center"><div >BlockInv Wash Factor</div></th>
<th class="rotate" align="center"><div >Bk Blk Impact Count</div></th>
<th class="rotate" align="center"><div >PrntBrw Impact Count</div></th>
<th class="rotate" align="center"><div >System Created</div></th>
<th class="rotate" align="center"><div >Modification Type</div></th>
</tr>
</thead>
</table>
<div class="body">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
<tr class="mwp_Row1" align="center">
<td align="center">Date</td>
<td align="center"><strong>Old Data</strong></td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
<td align="center">Value</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>