为什么我的桌子在我的盒子 html 下？答案

【问题标题】：why does my table get under my box html?为什么我的桌子在我的盒子 html 下？
【发布时间】：2023-04-11 07:23:02
【问题描述】：

您好，我是 html 和 css 的新手。我开始制作一个小盒子，我想在其中展示一张桌子。但由于某种原因，我的桌子最终落到了盒子下面。 h4不知何故留在盒子里。请帮忙。框名 = content2，我像这样在 css 中制作了这个。

#content2{
    margin: 30px 0;
    background: white;
    padding: 20px;
    clear: both;
    box-shadow: 0px 1px 1px #999;
    text-align: center;
}

我的 html 看起来像这样：

<div id="content2">
     <h4>Onze producten</h4>

    <table align="left">
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>
                <img src="../images/boy1.jpg" alt="Boy1" width="165" height="246" hspace="20" target="_blank" href="kleding.htm">
            </td>
            <td>
                <img src="../images/girl1.jpg" alt="Girl1" width="165" height="246" hspace="20" target="_blank" href="kleding.htm">
            </td>
            <td>
                <img src="../images/boy2.jpg" alt="Boy2" width="165" height="246" hspace="20" target="_blank" href="kleding.htm">
            </td>
            <td>
                <img src="../images/girl3.jpg" alt="Girl2" width="165" height="246" hspace="20" target="_blank" href="kleding.htm">
            </td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>
</div>

【问题讨论】：

不推荐使用 align 属性。边距应用于表格和块元素的对齐目的。

标签： html css css-position html-table

【解决方案1】：

尝试使用溢出：隐藏；在 #content2 的 css 中，发布表格的所有 css，这样会更容易找出问题

【讨论】：

我没有任何用于表格的 CSS，但 'overflow:hidden;'成功了。谢谢楼主！

【解决方案2】：

在中间的 tr 标记中有四个 td 标记，而在顶部和底部的 tr 标记中只有三个。这会打破你的桌子。要么在顶部和底部 tr 标记中添加额外的 td，要么在中心 td 标记之一中使用 colspan="2"。

【讨论】：

我完全忘记了 td 标签。感谢您指出这一点。
虽然这是一个有效的观察结果，但它并不能回答问题。这应该是一条评论。

【解决方案3】：

发生这种情况是因为 div 的溢出属性的默认值是允许事物在溢出时呈现，因此您需要指定其他内容，例如溢出：隐藏；或溢出：自动；阻止它使用默认行为。

延伸阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

“可见：默认值。内容不被裁剪，可能会在内容框外渲染。”

【讨论】：