Question

这个例子是从更多（更多）更大的页面中归结而来的。如果你显示HTML，你会看到一个绿色条而不是跨越显示，下面的内容比显示器宽。

我需要的是，上部条形与下部内容一样长，这样当内容比屏幕宽，并且用户滚动时，那个上面酒吧一直延伸到右边缘。我找不到办法做到这一点。

有什么想法吗？非常感谢 -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"><html xmlns="https://www.w3.org/1999/xhtml">
<head>
<style>
.topborder
{
  background-color : #4F8816;
  height: 20px;
}
</style>
</head>
<body style="margin: 0;"><div><table border="0" cellspacing="0" cellpadding="5px" style="height: 100%;">
<tr><div style="width: max-content;" class="topborder"></div></tr>
<tr>
    <td style="width: 175px; padding-right: 10px; vertical-align: top;">
    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
    </td>
    <td style="vertical-align: top; padding-left: 10px; border-left: #999999 1px solid;">
        <table border="0" cellspacing="2" id="ID0EGJEK">
            <tr>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
                <th >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</th>
            </tr>
        </table>
    </td>
</tr>
</table></div></body>
</html>

以下是fiddle

Answer 1

检查此fiddle

您的代码存在的问题是，实际上您为<td>之一设置了12 <tr>，因此它得到了扩展。所以，我刚刚添加了colspan等于12，使所有<tr> s的宽度相等..

详细了解colspan属性here

这是我改变的html部分..

<tr>
     <td colspan="12">
          <div style="width: max-content;" class="topborder"></div>
     </td>
</tr>

html：获得横跨大于显示宽度的横幅

1 个答案:

检查此fiddle