のCss 3 - HTMLテーブルに

Question

を境界線の色を設定するには、私は次の画像のようにテーブルをしたい：

私はテーブルのHTMLコードを持っているが、私はのように境界線の色を変更する必要があります画像。

私はずっと前にそれをやったが、今はそれを行うことで最善の方法を知りたい。

は常に同じ行と列ですが、1つの必須必須であり、多分使用して、唯一のCSSで実行する必要があります。

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

方法：

tr:nth-child(3) 

これは、テーブルのhtmlコードであります私はそれをすることができますか？

Answer 1

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>