html - CSS：td上的双边框显示为单边框

Question

我有一个 HTML 表格，#ols_tbl我试图在class="td_double".

#ols_tbl {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}

#ols_tbl .td_double {    
    border-bottom: double;
    border-bottom-color: #000000;    
    border-bottom-style: double;
    border-bottom-width: 1px;
}

但是，我只能得到一条线，为什么这不起作用？

Answer 1

尝试增加border-width. 通常你会需要3px. 每个边框一个像素，间隙加上一个像素空间。

Answer 2

您的边框没有明显翻倍，因为它只有 1px 宽度。当两条 1px 线被限制在 1px 空间内时，您无法明显区分它们。至少您必须将宽度更改为 3px：

#ols_tbl .td_double {    
    border-bottom-color: #000000;    
    border-bottom-style: double;
    border-bottom-width: 3px;
}

或者简单地说：

#ols_tbl .td_double {    
    border-bottom: 3px double #000;
}

这是一个演示这一点的JSFiddle 演示。