Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change TD border color with HTML or CSS

Tags:

html

css

I have a little trouble with changing one tr border color My table is something like this

<table>
    <div id="one">
        <tr>
            <td></td>
            <td></td>
        </tr>
    </div>
    <div id="two">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </div>
</table>

I would like first <tr><td></td><td></td></tr> to be white and the second one to be blue I have tried with

#one td, #one tr,#onetable{
border: 1px solid white;  
border-color:#ff0000;

But it didn't work Any idea Ty

like image 918
Alvaro Parra Avatar asked Oct 04 '13 14:10

Alvaro Parra


People also ask

How do I change the border-color in HTML TD?

BORDERCOLOR = color expression. BORDERCOLORLIGHT = color expression. BORDERCOLORDARK = color expression. BORDERCOLORLIGHT sets the color of the upper and left corners of the cell.

How do I change the border-color of a row in HTML?

you should give the border to the rows and the td that are first child, then apply different color for the border of the highlited tr. Show activity on this post. In order to fix this give your tr a display property of block . See the code snippet below.

How do you add a border to TD in HTML?

To create table border in HTML, the border attribute was used. But the introduction of HTML5, deprecated the border tag. Create table border using the CSS property border. Set table border as well as border for <th> and <td>.


2 Answers

<style type="text/css">
    table {
        border-collapse: collapse;
    }
    #one td {
        border: 1px solid #ff0000; 
    }
</style>

<table>
    <tr id="one">
        <td></td>
        <td></td>
    </tr>
    <tr id="two">
        <td></td>
        <td></td>
    </tr>
</table>
like image 121
Ravi Chauhan Avatar answered Sep 27 '22 18:09

Ravi Chauhan


Here you go

<html>
<head>
<style>
    body {background-color: beige;}
    table {border-collapse: separate;}
    table td { width: 50px; height: 50px;}
    table tr:first-child td {border: 1px solid #fff; }
    table tr:last-child td {border: 1px solid #0000FF; }
</style>
</head>
<body>    
    <table>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    </table>
</body>
</html>

and a fiddle

(btw #0000FF is blue)

like image 24
jenson-button-event Avatar answered Sep 27 '22 18:09

jenson-button-event