CODEWITHSUNDEEP
css
Eladerezador
Eladerezador

Reputation: 1301

Css 3 - To configure border color in html table

I want to do a table as the next image:

enter image description here

I have the table html code , but I need to change the border color as in the image.

I did it a long time ago, but I would like to know the best way by do it now.

Always are the same rows and columns, but is mandatory one requisite, must be done with only css, maybe using:

tr:nth-child(3)

This is the table html code:

<table border="1" cellpadding="6" cellspacing="0">
    <thead>
        <tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th><th>Field5</th><th>Field6</th><th>Field7</th><th>Field8</th><th>Field9</th></tr>
    </thead>            
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
    </tbody>
</table>

How I could do it?

Upvotes: 1

Views: 500

Answers (1)

kyun
kyun

Reputation: 10264

tr > td:nth-child(7), tr > th:nth-child(7){
  border-right: orange 2px solid;
}
tr > td:nth-child(8), tr > th:nth-child(8){
  border-left: orange 2px solid;
}

tr:nth-child(3) > td{
  border-bottom: orange 2px solid;
}
tr:nth-child(4) > td{
  border-top: orange 2px solid;
}
<table border="1" cellpadding="6" cellspacing="0">
    <thead>
        <tr><th>Field1</th><th>Field2</th><th>Field3</th><th>Field4</th><th>Field5</th><th>Field6</th><th>Field7</th><th>Field8</th><th>Field9</th></tr>
    </thead>            
    <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr> 
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
    </tbody>
</table>

Upvotes: 4

Related Questions