更改tr和td的边框颜色

I am trying to make the border for a table look something like the picture attached however it does not implement the border colors or anything. It might be something to do with the Bootstrap 'table' class.

我试图使一个表的边框看起来像附加的图片,但它没有实现边框颜色或任何东西。它可能与Bootstrap'table'类有关。

Here is my code:
HTML:

这是我的代码: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;
}

4 个解决方案

#1

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>

#2

Well, I don't see any image attached. But am hoping this is what your in search off ! Try giving separate ID for each of TR and TD, then define their color in CSS ! Like shown in below example,

好吧,我没有看到附加任何图像。但我希望这是你的搜索!尝试为每个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;;  
}

#3

You have not specified the border-type as solid in your css. Without type, border styles never work.

您没有在css中将border-type指定为solid。没有类型,边框样式永远不会工作。

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

Here's a working DEMO.

这是一个有效的DEMO。

#4

i think this code work for you :

我认为这段代码适合你:

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

and style :

和风格:

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

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