Question

有人可以告诉我如何为内表创建滚动条吗？内部表不显示在容器中。我把容器黄色的背景着色了。桌子本身是蓝色的。

我想在表格中看到一个滚动条。

在这里：

<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>

Answer 1

用div包装你的内部表。通过赋予宽度和高度样式以及溢出为自动或滚动来使该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>

应该有效

Answer 2

在div部分试试这个

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

如果失败，请尝试溢出：滚动表格的样式。

Answer 3

用一个div包裹你的桌子，这个div与container和overflow:scroll

具有相同的宽度

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

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

3 个答案: