代码之家 › 专栏 › 技术社区 › NawaMan

边框收拢和边框左/右的奇怪问题

css html

NawaMan · 技术社区 · 15 年前

我对Firefox中的表有一些奇怪的问题。

我想要创建的是创建一个网格和思考边界。

这是模型(谢谢inkscape)。

Mockup http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Mockup.png

<style>
.mytable { border-collapse: collapse; }

.mytd {
    width : 1.3em;

    border  : 1px solid black;
    padding : 0px;
    margin  : 0px;

    text-align : center;
}

.mytd-top    { border-top:    3px solid black; }
.mytd-bottom { border-bottom: 3px solid black; }
.mytd-left   { border-left:   3px solid black; }
.mytd-right  { border-right:  3px solid black; }
</style>

<table class="mytable">
    <tr><td class="mytd mytd-top    mytd-left">1</td><td class="mytd mytd-top"   >2</td><td class="mytd mytd-top    mytd-right">3</td></tr>
    <tr><td class="mytd             mytd-left">4</td><td class="mytd"            >5</td><td class="mytd             mytd-right">6</td></tr>
    <tr><td class="mytd mytd-bottom mytd-left">7</td><td class="mytd mytd-bottom">8</td><td class="mytd mytd-bottom mytd-right">9</td></tr>
</table>

上面的代码应该给我我想要的,但它没有。在使用时,左右边界似乎有问题 border-colllapse 是 colllapse .

以上模式让我明白:

Img 1 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img1.png

请注意,粗体有三行。

左侧和右侧,而不是顶部和底部 .

如果这三行是:

.mytable    { border-collapse: collapse; }
.mytd-left  { }
.mytd-right { }

我得到:

Img 2 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img2.png

顶部和底部都没有问题。

如果这三行是:

.mytable    { border-collapse: collapse; }
.mytd-left  { border-left:   3px solid black; }
.mytd-right { }

我得到:

Img 3 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img3.png

如果这三行是:

.mytable    { }
.mytd-left  { border-left:   3px solid black; }
.mytd-right { border-right:  3px solid black; }

我得到:

Img 4 http://dl.dropbox.com/u/1961549/StackOverflow/StrangeTableBorder/Img4.png

collapse 所有边界显示如预期。

附近有工作吗?替代 ?

我只针对FF(内部项目),所以我真的不在乎它是否在其他浏览器中工作。

提前谢谢。

2 回复 | 直到 15 年前

Zenon 15 年前

我不知道为什么firefox会这样,但我刚刚找到了一个在firefox中工作的简单解决方案。

将表格设置为边框折叠:折叠;如前所述,为所有单元格提供通常的1px边框(不管是左边框、右边框还是其他边框,您都不需要),但将所有tr封装到一个tbody元素中,并为tbody元素a提供所需的3px边框。在ff 3.5中工作良好。

简单的例子:

<table style="border-collapse:collapse;">
    <tbody style="border:3px solid;">
        <tr>
            <td style="border:1px solid;">a</td>
            <td style="border:1px solid;">b</td>
        </tr>
    </tbody>
</table>

为您提供一张表格,a和b之间有一个1便士的边框,整个表格周围有一个3便士的边框。

Chris Van Opstal 15 年前

尝试将3px边框应用于整个表格:

.mytable { border-collapse: collapse; border: 3px solid black;}
.mytd {  ... }

跳过上/右/下/左的课程。