更改表格单元格边框的颜色答案

【问题标题】：Change color of table cell border更改表格单元格边框的颜色
【发布时间】：2016-02-11 09:14:34
【问题描述】：

我希望能够更改任何表格单元格边框的颜色。我决定不使用左边框、右边框等，因为不可能使其像素完美。不同的浏览器以不同的方式呈现它。尤其是在边境交叉口地区。我想出了这个方法，但它并没有像我预期的那样在 IE 中工作：

HTML：

<table>
    <tr>
        <td>
            line 1
            <div class="left-border"></div>
        </td>
        <td>
            line 1<br>
            line 2
        </td>
    <tr>
</table>

CSS：

table {
    border-collapse: collapse;
}

table, th, td {
   border: 1px solid #ccc;
}

tr {
    vertical-align: top;
}

td {
    position: relative;
    padding: 5px;
}

.left-border {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 1px;
    background-color: #000;
}

JSFIDDLE：http://jsfiddle.net/dv1oqopL/5/

【问题讨论】：

你可以设置overflow:hidden为td，手动设置div的高度大于td的高度，比如100px。它将像在其他浏览器中一样显示全高边框
@DeepakSharma 边框将在您设置overflow: hidden;时变得不可见。
您要更改每个<td> 的border-color 吗？
@JohnReyM.Baylen 没有。我希望能够更改任何单元格的任何边框的颜色。在我的情况下一切正常，问题出在 IE 中。但我真的不能为此责怪 IE，因为 position: relative; for td 元素未由 CSS 标准定义。所以我需要一些 IE 修复或不同的方法。

标签： html css html-table css-tables

【解决方案1】：

嗯，IE 一如既往地是一个 B***h，它只是根据它自己的内容计算 td 的高度，所以我没有为你提供干净的解决方案，但一个可能解决你问题的 hack 是添加

border-left:1px solid #000;

在该 td 上，这将填充 div 下方的边框，并在所有浏览器中查看该部分。

【讨论】：