更改 tr 和 td 的边框颜色答案

【问题标题】：Change the border color of tr and td更改 tr 和 td 的边框颜色
【发布时间】：2014-11-15 02:19:46
【问题描述】：

我正在尝试使表格的边框看起来像所附图片，但它没有实现边框颜色或任何东西。这可能与 Bootstrap 'table' 类有关。

这是我的代码：
HTML：

<table class="table">
        <tbody>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-calendar" id="left-info" > 17 SEPTEMBER</span>
                </td>
             </tr>
        </tbody>
    </table>

css:

table{
padding: 10px !important;
background-color: #575757 !important;
}

tr{
background-color: #575757;
border-top: 10px!important;
border-top-color: #383D3D !important;

}

td{
border-left: 3px !important;
border-left-color: #383D3D !important;
}

【问题讨论】：

标签： html css twitter-bootstrap html-table

【解决方案1】：

嗯，我没有看到任何附加的图像。但我希望这就是你要寻找的东西！尝试为每个 TR 和 TD 提供单独的 ID，然后在 CSS 中定义它们的颜色！如下例所示，

<table>

<tr id="one">
<td><td><td></td>
</tr>

<tr id="two">
<td><td><td></td><td></td>
</tr>

</table>

#one td{
border: 1px solid #ff0000;
}

【讨论】：

【解决方案2】：

table{
border-collapse: collapse;
background-color: red;
}
tr{
background-color: #575757;
border-top: 10px solid #383D3D !important;
}
td{
    padding:10px;
border-left: 3px solid green !important;
}

<table class="table">
        <tbody>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-calendar" id="left-info" > 17 SEPTEMBER</span>
                </td>
             </tr>
        </tbody>
    </table>

【讨论】：

【解决方案3】：

你没有在你的 CSS 中将边框类型指定为 solid。如果没有 type，边框样式将无法正常工作。

CSS：

table{
 padding: 10px !important;
 background-color: #575757 !important;
}

tr{
 background-color: #575757;
 border-top: solid 10px!important;
 border-top-color: #383D3D !important;
}

td{
 border-left: solid 3px !important;
 border-left-color: #383D3D !important;
}

这是一个有效的DEMO。

【讨论】：

【解决方案4】：

我认为这段代码适合你：

<table class="table">
    <tbody>
        <tr>

            <td id="halfborder">
                <span class="glyphicon glyphicon-calendar" id="left-info1" > 17 SEPTEMBER</span>
            </td>
            <td>
                <span class="glyphicon glyphicon-calendar" id="left-info2" > 17 SEPTEMBER</span>
            </td>

         </tr>
    </tbody>
</table>

和风格：

#left-info1 {
    border-right:1px solid #999;
}
td {     padding:0px 10px;    }

.table {
    background-color:#333;
    padding:10px 0;
}

【讨论】：