Menu
How can I make left border of the cell red? Why this does not work? Thanks!!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.main-table {
border-collapse: collapse;
}
.main-table td {
margin: 0px;
padding: 0px;
border: 1px solid #aaa;
padding: 1px 4px 1px 4px;
}
.left-border {
border-left: 1px solid red !important;
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
Shouldn't left-border override the color specified on .main-table td?
<table class='main-table' cellspacing='0' cellpadding='0'>
<tr>
<td> 1 </td>
<td> 366 </td>
</tr>
<tr>
<td > 2 </td>
<td class='left-border'> 777 </td>
</tr>
</table>
</body>
</html>
543
To change the border's color, use the attribute bordercolor="color" where color is the same format as all the other web colors we've been using. The table below has the bordercolor set to #ff00ff with the table tag <table bordercolor="#ff00ff">. To change the background color, use the attribute bgcolor="color".
Select the Table Tools / Design tab on the ribbon. Select one of the following in the Draw Borders group: Use Pen Color to change the color of the border. If you want more color options, click More Border Colors, and then either click the color that you want on the Standard tab, or mix your own color on the Custom tab.
If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
With the border-color property, you can set the color of the border.
Set the border to 1px double red. A 1px-wide "double" border looks identical to a "solid", but has higher precedence in collapsed border computation.
132
Try this,
.main-table {
border-collapse: collapse;
}
.left-border {
border-left: 2px solid red !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
