更改tr和td的邊框顏色

我正在嘗試使表格的邊框看起來像附加的圖片，但它沒有實現邊框顏色或任何東西。這可能與Bootstrap的'表'類有關。更改tr和td的邊框顏色

這裏是我的代碼：
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; 
}

what I want the end result to be

來源

2014-09-20 elulle

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>

來源

2014-09-20 18:12:46 AvrilAlejandro

嘛，我看不出有任何附加的圖像。但我希望這是你的搜索！嘗試爲每個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;; 
}

來源

2014-09-20 17:59:37 joyjophin

您還沒有指定邊界類型爲你的CSS 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; 
}

這裏的工作DEMO。

來源

2014-09-20 18:21:36

我覺得你這個代碼的工作：

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

來源

2014-09-20 18:36:30 amir2h

更改tr和td的邊框顏色

回答

相關問題