Question

非常感谢你的帮助。我希望下面的代码能给我一个可以水平滚动的表格，但它会切断表格的左侧。我将在下面给出截图。我尝试使用不同的溢出标签，没有运气（包括溢出：自动） - 我设法做的就是得到一个灰色的滚动条：

<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

Answer 1

删除表格中的右对齐。它似乎解决了......

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

编辑：这是JSFiddle工作

Answer 2

给包装器一个宽度：

#myTable {
        font-size: 5em;
        overflow-x: scroll;
        font-style: bold;
        width:500px;
    }

Answer 3

HTML

<div id="myTable">
    <table border="1"><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>

CSS

#myTable{overflow:auto}

基本上：删除p，删除align（并删除边框）并使用纯CSS

Answer 4

HTML更改

border="1" align="right"

CSS更改

overflow: auto;
width : 300px;

如果要添加边框或对齐表格，请使用css而不是html

http://jsfiddle.net/8zh33mb9/

如何水平滚动浏览HTML表格？

4 个答案: