HTML/CSS：如何为tr创建滚动条

Question

HTML/CSS：如何为tr创建滚动条

htmlcss

6

有人可以告诉我如何为内部表格创建滚动条吗？内部表格未在容器中显示。我将容器的背景颜色设置为黄色。表格本身是蓝色的。

我想在表格内看到滚动条。

来源： http://nopaste.info/e51385254e.html

还有这里：

<html>
<body>
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
    <table style="background-color: blue">
        <tr>
            <th>column1</th>
            <th>column2</th>
            <th>column3</th>
            <th>column4</th>
        </tr>
        <tr>
            <td>columnvalue1</td>
            <td>columnvalue2</td>
            <td>columnvalue3</td>
            <td>columnvalue4</td>
        </tr>
        <tr>
            <td colspan="4">
                <table>
                    <tr>
                        <th>SubColumn1</th>
                        <th>SubColumn2</th>
                        <th>SubColumn3</th>
                        <th>SubColumn4</th>
                        <th>SubColumn5</th>
                        <th>SubColumn6</th>
                        <th>SubColumn7</th>
                        <th>SubColumn8</th>
                        <th>SubColumn9</th>
                        <th>SubColumn10</th>
                        <th>SubColumn11</th>
                        <th>SubColumn12</th>
                        <th>SubColumn13</th>
                        <th>SubColumn14</th>
                    </tr>
                    <tr>
                        <td>subvalue1</td>
                        <td>subvalue2</td>
                        <td>subvalue3</td>
                        <td>subvalue4</td>
                        <td>subvalue5</td>
                        <td>subvalue6</td>
                        <td>subvalue7</td>
                        <td>subvalue8</td>
                        <td>subvalue9</td>
                        <td>subvalue10</td>
                        <td>subvalue11</td>
                        <td>subvalue12</td>
                        <td>subvalue13</td>
                        <td>subvalue14</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
<body>
</html>

- Benjamin

"内部表格"是哪一部分？ - Kyle

使用find函数:D 哈哈 :D 我也得看两次... - Shrinath

你在过去的三天里一直在尝试做这个吗？：http://stackoverflow.com/questions/4898187/how-to-create-a-table-within-a-legend-with-overflow-x我看到你回答了@Kyle Sevenoaks的问题，那里的解决方案几乎与这里相似！！ - Shrinath

3个回答

4

在div部分试试这个

<div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto;
background-color: yellow; height: 1000px;">

如果失败，请在表格样式中尝试使用overflow:scroll。

- Oralet

1

抱歉发了两次，我已经标记要删除其中一条了。 - pdinklag

1

将您的表格用一个 div 包裹起来，该 div 的宽度与您的 container 相同，并设置 overflow:scroll

示例：http://jsbin.com/uheha4

- Sotiris

哇..我不知道jsbin...那很酷 :) 谢谢 :) - Shrinath

我知道jsfiddle.net，但是jsbin对我来说是新的:) 谢谢你给我的启发 :) - Shrinath

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shrinath · Accepted Answer

将内部表格包裹起来。通过给它设置宽度和高度样式，并将溢出设置为auto或scroll，使该div可滚动。

<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
    <tr>
        <th>column1</th>
        <th>column2</th>
        <th>column3</th>
        <th>column4</th>
    </tr>
    <tr>
        <td>columnvalue1</td>
        <td>columnvalue2</td>
        <td>columnvalue3</td>
        <td>columnvalue4</td>
    </tr>
    <tr>
        <td colspan="4">
            <div style="max-height: 100px; max-width: 100px; width: 100px; overflow: auto;">
            <table>
                <tr>
                    <th>SubColumn1</th>
                    <th>SubColumn2</th>
                    <th>SubColumn3</th>
                    <th>SubColumn4</th>
                    <th>SubColumn5</th>
                    <th>SubColumn6</th>
                    <th>SubColumn7</th>
                    <th>SubColumn8</th>
                    <th>SubColumn9</th>
                    <th>SubColumn10</th>
                    <th>SubColumn11</th>
                    <th>SubColumn12</th>
                    <th>SubColumn13</th>
                    <th>SubColumn14</th>
                </tr>
                <tr>
                    <td>subvalue1</td>
                    <td>subvalue2</td>
                    <td>subvalue3</td>
                    <td>subvalue4</td>
                    <td>subvalue5</td>
                    <td>subvalue6</td>
                    <td>subvalue7</td>
                    <td>subvalue8</td>
                    <td>subvalue9</td>
                    <td>subvalue10</td>
                    <td>subvalue11</td>
                    <td>subvalue12</td>
                    <td>subvalue13</td>
                    <td>subvalue14</td>
                </tr>
            </table>
            </div>
        </td>
    </tr>
</table>

那应该可以工作。