Question

我无法将滚动条一直向右移动。出于某种原因，我的滚动条大约是右边的4/5，但不是一直到右边，我不知道为什么。

这是我的HTML代码：

<table class="userQueue">
    <caption>Users Queue</caption>
    <tbody class="userQueue">
        <tr>
            <td class="userQueue">
                <div class="userQueue">
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br>  
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                </div>
            <td>
        </tr>
    </tbody>
</table>

这是我的CSS代码：

tbody.userQueue 
{
    background-color: grey;
}

td.userQueue
{
    height: 200px;
}

td.userQueue > div
{
   width: 100%; 
   height: 100%; 
   overflow: auto;
}

这是我网页上显示的内容：

View of my table

我希望滚动条一直向右，但由于某种原因，它不是......请注意滚动条与其容器的右侧之间是否有一点灰色。提前谢谢！

Answer 1

标记中有两个未关闭的<td>标记。浏览器会意识到这个错误并为您关闭它们，创建一个额外的，不需要的<td>标记，这是您看到的额外空间。我相信你的意思是第二个成为结束标记（</td>）。变化

Hello</br> 
</div><td>

到

Hello</br> 
</div></td>

并且额外的空间消失了。

Answer 2

我相信我已经解决了你的问题而且感谢相对简单！

首先，我将解释这个问题。其次，我将提供代码，第三，我将为您提供我的结果的屏幕截图。这就是......

第一 - 你需要做两件事，它们涉及你的CSS代码。首先，您需要告诉table元素您希望它占用屏幕的宽度。第二件事是你需要告诉“td”元素和“div”元素，它们需要占用“table”元素提供的所有空间。

所以基本上，如果你告诉表格占用100％的屏幕宽度然后你告诉其他两个元素占据表格的100％，你实际上是在告诉代码你想要一切占据屏幕的整个宽度。

SECOND - 这是代码，您会注意到我在一开始就有一小段代码设置填充和边距为“0”。这是为了帮助它在任何浏览器上看起来正确。它被称为浏览器重置“。我在本例中使用的那个只是一个基本的我被称为”软浏览器重置“。这是完整的代码....

<强> HTML

<table class="userQueue">
            <caption>Users Queue</caption>
            <tbody class="userQueue">
                <tr>
                    <td class="userQueue"><div class="userQueue">
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br>  
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    Hello</br>
                    Hello</br> 
                    </div><td>
                </tr>
            </tbody>
        </table>

CSS

* {
    padding: 0;
    margin: 0;
}

table.userQueue {
    width: 100%;
}

tbody.userQueue 
{
    background-color: grey;
}

td.userQueue
{
    height: 200px;
    width: 100%;
}

td.userQueue > div
{
   width: 100%; 
   height: 100%; 
   overflow: auto;
}

第三 - 这是我的结果的屏幕截图......

我希望有帮助，不要忘记发布结果，看看是否有帮助。：）

Answer 3

您的桌子标签

没有结束标记

你的div不需要在那里你可以为td元素分配一个静态高度，你也不需要多次引用你的html中的userQueue类

- 这取决于你想要实现的目标

.userQueue td {width: 100%; height: 200px; overflow: auto;}

<table class="userQueue">
        <caption>Users Queue</caption>
        <tbody>
          <tr>
            <td>
               <div>
                  hello<br>
                  hello<br>
                  hello<br>
                  hello<br>
                </div>
            </td>
          </tr>
       </tbody>
 </table>

为什么我的滚动条不是一直向右对齐？ HTML / CSS

3 个答案: