gpt4 book ai didi

html - 如何水平滚动我的 HTML 表格?

转载 作者:太空宇宙 更新时间:2023-11-03 20:41:24 24 4
gpt4 key购买 nike

非常感谢您的帮助。我希望下面的代码能给我一个可以水平滚动的表格,但它会切断表格的左侧。我将在下面提供屏幕截图。我尝试使用不同的溢出标签但没有成功(包括溢出:自动) - 我设法做的就是得到一个灰色的滚动条:

<html>
<head>
<style>
#myTable {
font-size: 5em;
overflow: visible;
overflow: scroll;
font-style: bold;
}
</style>
</head>
<body>
<p>
<div id="myTable"><table border="1" align="right"><tr>
<th>SomeHeaderX</th><th>SomeHeaderyY</th><th>SomeHeaderZ</th>
<th>SomeHeaderABC</th><th>SomeHeaderABC</th><th>SomeHeaderABC</th>
<th>SomeHeaderABC</th><th>SomeHeaderABC</th><th>SomeHeaderABC</th>
<th>SomeHeaderABC</th><th>SomeHeaderABC</th><th>SomeHeaderABC</th>
<th>SomeHeaderABC</th><th>SomeHeaderABC</th><th>SomeHeaderABC</th>
<th>SomeHeaderABC</th><th>SomeHeaderABC</th><th>SomeHeaderABC</th>
<th>SomeHeaderABC</th></tr><tr><td>DataABC</td><td>DataABC</td>
<td>DataABC</td><td>DataABC</td><td>DataABC</td><td>DataABC</td>
<td>DataABC</td><td>DataABC</td><td>DataABC</td><td>DataABC</td>
<td>DataABC</td><td>DataABC</td><td>DataABC</td><td>DataABC</td>
<td>DataABC</td><td>DataABC</td><td>DataABC</td><td>DataABC</td>
<td>DataABC</td></tr></table></div>
</p></body>
</html>

这是我得到的输出:

TableOutput

任何有关使此表格甚至整个页面可滚动的帮助都会很棒。

再次感谢。

这是一个JSFiddle

最佳答案

删除表格中的右对齐。它似乎修复了它......

...
<div id="myTable"><table border="1"><tr>
...

编辑:这是一个JSFiddle它的工作

关于html - 如何水平滚动我的 HTML 表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25453823/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com