Html 溢出：隐藏在表格上会导致底部和右侧边框消失_Html_Css

Html 溢出：隐藏在表格上会导致底部和右侧边框消失

html css

Html 溢出：隐藏在表格上会导致底部和右侧边框消失,html,css,Html,Css,正如标题所说，当使用overflow:hidden时，我的表边框被切断。例如，请参见下面的代码 <style> table { border-collapse: collapse; } table { border: 1px solid black; overflow: hidden; } </style>

正如标题所说，当使用overflow:hidden时，我的表边框被切断。例如，请参见下面的代码

    <style>
        table {
            border-collapse: collapse;
        }

        table {
            border: 1px solid black;
            overflow: hidden;
        }

    </style>

    <body>
        <table>
            <thead>
                <tr>
                    <th>header 1</th>
                    <th>header 2</th>
                    <th>header 3</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>side header</th>
                    <td>data 1</td>
                    <td>data 2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>footer header</th>
                    <td>footer 2</td>
                    <td>footer 3</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

我将感谢任何解释或更好的解决办法。我真的很想知道，经过几天的调查后，它为什么会这样做

谢谢

如果没有可折叠的边框，使用

边框折叠

有什么意义？移除

边框折叠

，您就会没事了

请参见此处的工作示例：

有两种快速解决方案：

使用2倍边框宽度

使用轮廓而不是边框

例如：

或

我认为，发生这种情况的原因是，当使用表格边框的折叠边框模型时，浏览器试图在中间拆分边框。在边框外的一个像素上，这显然是不可能的，因此浏览器在上/左时使用全像素宽度，在下/右时不使用任何宽度。这种行为可能在标准中的某个地方，我没看那么远。但在内部，这将正确地填充边界，而不会使宽度加倍，这只是外部和溢出的组合：隐藏，这可能是裁剪底部和右侧，浏览器生成的，但从技术上讲，将其向右推半个像素，因此位于元素区域的“外部”。我希望这是有道理的。大纲并没有被溢出裁剪-我不知道为什么，我不会预测异常

另一个解决方案可能是将溢出应用于td和th而不是表，或者检查您是否真的需要设置溢出。

多亏了skrivener和一些进一步的调查，我才设法解决了这个问题。看看解决方案

问题-表格边框周围的边框折叠不相等：

.table1 {

    border          : 3px solid black;
    overflow        : hidden;
    border-collapse : collapse;
}

解决方案-不得在

边框中声明边框宽度

必须使用

边框宽度

：

.table2 {

    border          : solid black;
    overflow        : hidden;
    border-collapse : collapse;
    border-width    : 6px 7px 7px 6px;
}

th {

    border: 1px solid black;
}

th {

    border: 1px solid black;
}

问题：

<table class="table1">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>

<table class="table2">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>


标题1
标题2
标题3
侧割台
数据1
数据2
页脚页眉
页脚2
页脚3

解决方案：

<table class="table1">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>

<table class="table2">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>


标题1
标题2
标题3
侧割台
数据1
数据2
页脚页眉
页脚2
页脚3

斯克里维纳：

“我认为，发生这种情况的原因是，当使用折叠的浏览器尝试拆分表格边框的边框模型边框在中间。在边框外的一个像素上，很明显这是不可能，因此浏览器使用全像素宽度（如果为上/左），如果是底部/右侧，则什么也没有。”

这让我相信，如果我只是手动设置4个边框设置

边框宽度

，并在右侧和底部添加1px，舍入将正常工作。查看解决方案，您可以更新边框以查看其是否正常工作。现在，不管怎样，只要在右边框和下边框上添加1px，就可以拥有相同宽度的外边框

再次感谢您的帮助

试试下面的内容 1.给你的桌子留些空白 2.用户表布局：固定

3.设置

正如我所说的——“我已经将我的示例简化到了最低限度”——这只是为了演示底部和右侧边界消失。请随意添加css以获得更多边框。您能解释一下为什么需要

overflow:hidden？在桌子上做这件事似乎很奇怪。是的，我想没有上下文是很奇怪的。我正在创建一个具有悬停行和列的表。也就是说，当鼠标悬停在单元格上时，它们会高亮显示。为了突出显示列，您使用了一个技巧，您可以在这里找到它——如果您不使用overflow:hidden，背景将从表中推出您不想要的内容。希望这能解释为什么它会在那里。正如我所说的，这里只包含了最低限度的代码，这样就不会用不必要的代码把代码弄得乱七八糟。谢谢你的帮助。正如我所说的——“我已经将我的示例简化到了最低限度”——这只是为了演示底部和右侧边界消失。请参阅示例，以演示在没有边框折叠的情况下如何出错（是的，我知道您可以手动设置特定的边框来解决此问题，但如果使用较大的表/示例，则可能会变得混乱）。我原以为这是对我祈祷的回答，但如果你给内部细胞加上边框，比如说页眉-折叠不会产生影响，所以当你希望它们都相同时，你有不同宽度的边框。请参阅下面您提供的两个解决方案的示例。据我所知，这些细胞应该会塌陷到外缘。[链接]-我用增加的边框更新了第一个示例，以便您可以看到整个表格的宽度不相等。th的边框将显示边框没有正确折叠。THXAWES多亏了你，我才知道这一点。skrivener，你文章中关于舍入的部分让我想知道，如果我只是手动设置所有边框，并在右侧和底部添加1px，舍入是否会正确工作。查看-现在您可以增加表格边框（确保右边框和下边框=+1px），边框和边之间没有任何差异。非常感谢！
<table class="table2">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>