4

正如标题所说，使用溢出时我的表格边框在我的桌子上被切断：隐藏。例如，请参见下面的代码。

    <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>

我已将示例简化到最低限度。我可能会失去可以纠正此问题的边框折叠样式，但我需要那种样式。没有它，我的代码会变得一团糟。

作为一个临时解决方案，我发现我可以使用下面的 css 破解它，但我不是 hack 的狂热粉丝！

.borderhack:after {
            content: '\00a0';
            position: absolute;
            border: 1px solid black;
            left: -2px;
            top: -2px;
            width: 100%;
            height: 100%;
            z-index: -10;
        }

        table {
            position: relative;
        }

我将不胜感激对此的任何解释或更好的解决方案。经过几天的调查，我真的很想知道为什么它实际上会这样做。

谢谢

4

4 回答 4

5

有两种快速解决方案：

  1. 使用 2px 边框宽度。
  2. 使用轮廓而不是边框​​。

例如：

table {
  border-collapse: collapse;
  border: 2px solid black;
  overflow: hidden;
}

或者

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

http://jsfiddle.net/6NVtS/1/

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

http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

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

于 2013-06-15T02:50:16.220 回答
0

border-collapse如果没有边界可以折叠，使用有什么意义？删除border-collapse，你会没事的。

请参阅此处的工作示例：http: //jsfiddle.net/86xST/

于 2013-06-15T02:30:57.123 回答
0

感谢 skrivener 和一些进一步的调查，我已经设法解决了这个问题。在此处查看解决方案。

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

.table1 {

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

解决方案- 不得声明边框宽度，border必须使用border-width：

.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>

斯克里维纳：

“我认为，发生这种情况的原因是，当使用表格边框的折叠边框模型时，浏览器试图在中心分割边框。在一个像素外的边框上显然这是不可能的，所以浏览器正在使用如果顶部/左侧是完整的像素宽度，如果底部/右侧则没有。”

这让我相信，也许如果我只是border-width手动设置 4 个边框设置并在右侧和底部添加 1px，则舍入可以正常工作。查看解决方案，您可以更新边框以查看它是否正常工作。现在，只要在右侧和底部边框上添加 1px，您就可以拥有等宽的外边框。

再次感谢所有的帮助！

于 2013-06-15T03:41:54.167 回答
0

尝试以下 1. 为您的表格留出余量 2. 用户表格布局：固定 3. 设置

于 2017-06-30T07:22:45.927 回答