Question

我创建了一个我需要的布局。在这个布局中，我希望顶行包含图像滚动。我无法在单个表中添加此属性。

所以我创建了两个上面的表，只有一行将滚动。底部表格将包含不会滚动的两行。

两个问题： - 1 GT;我已将scroll属性添加到上表的div中，但它显示了两个表。我只想滚动顶级餐桌 2 - ; GUI也仅覆盖了网页的一半（如何使其覆盖网页的整个高度）。

请就此提出建议。

<!DOCTYPE html>
<html>

<style>

div.scrollable {
    width: 100%;
    height: 0%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

</style>

<body>


<div class=scrollable>
<table >
  <tr>

    <td colspan="2" style="background-color:#CC99FF; white-space:nowrap;">

    <input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" /> 

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />


<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6QBsJ91Xp2YoqjiDe4qbYAGSf8deoyI0c1TutLDPrxwuQb34-" onclick="alert('clicked')"  alt="Bulb pop up" width="80" height="48" />

    </td>
  </tr>
</div>


</table>





<div>

<table width="100%"  border="0">

  <tr valign="top">
    <td style="background-color:#FFCCFF;
                  width:100px;text-align:top;">
      <b>Main Menu</b><br />
      BUTTON-1<br />
      BUTTON-2<br />
      BUTTON-3
    </td>

    <td style="background-color:#eeeeee;height:200px;
                  width:300px;text-align:top;">
        Table center
    </td>

  </tr>
  <tr>
    <td colspan="2" style="background-color:#CC99FF;">
        <center>
      Copyright © 2014 My First Layout
        </center>
    </td>
  </tr>
</table>

</div>

</body>
</html>

Answer 1

对于初学者来说，div和表格的嵌套错误：

<div class=scrollable>
<table >
...
</div>
</table>

其次，表格中的div没有任何意义。把它放在你的内部td单元格中：

<table>
<tr><td>
<div>
...
</div>
</td>
</tr>
</table>

第三，您在第一个表中的td中有一个colspan属性，但表中只有一个单元格。这应该删除。

最后，这个不起作用的主要原因是因为你有一个容器单元格大小为100％的div，它没有最大宽度，所以一切都相应扩展，因为没有条件可以阻止它

解决方案是：对具有图像的单元格使用具有固定值的max-width：

<td style="max-width:1024px; background-color:#CC99FF; white-space:nowrap;">

Answer 2

管理您的Html div结构：

input[type="image"]{
    float:left;
}

html布局 - 水平滚动

2 个答案: