2016-09-13 17 views
-1

テーブルの色に別の境界線の色を付ける方法を教えてください。枠線の色+ HTMLのフォント色?

ここにstyle.cssのクラスプロパティがあります。

table tr { 
 
    background: #9a9a9a; 
 
    border-color: #000000; 
 
    font-size: 21px; 
 
    color: #fff; 
 
    font-weight: bold; 
 
}
<table> 
 
    <tr> 
 
    <td>Cell1</td> 
 
    <td>Cell2</td> 
 
    </tr> 
 
</table>

Iは、背景色として濃い灰色と白との境界とフォント色に黒色を与える必要があります。

これを行う方法?

+1

Plsはjsfiddleを追加します。 – vivek

答えて

1

あなたはすべての4つの側面から適用されますtd

tr td { 
     background: #9a9a9a; 
     border:1px solid #000000; 
     font-size: 21px; 
     color: #fff; 
     font-weight: bold; 
    } 

borderに罫線を適用する必要があります。あなたはborder-right

0

国境はなく、表全体のみまたはテーブルセルのために、テーブルの行のために許可されていない、 border-topborder-bottomborder-leftと国境側面を変更することができます。ただし、outlineプロパティを使用して境界線を描画できます。ボックスモデルにはカウントされず、色、スタイル、または幅の面で個々の面を設定することはできません。

特定の行を選択するには、trで疑似クラスを使用します。

td { 
 
    padding: 1em 2em; 
 
} 
 

 
tr:hover { 
 
    background: #666; 
 
    outline: 1px solid black; 
 
    color: white; 
 
}
<table cellspacing="0"> 
 
    <tr><td>1</td><td>2</td></tr> 
 
    <tr><td>3</td><td>4</td></tr> 
 
</table>

0

#table { 
 
     border-collapse: collapse; 
 
     border-spacing: 0; 
 
     text-align: center; 
 
     width: 100%; 
 
    } 
 
    
 
    #table th { 
 
     text-transform: uppercase; 
 
     font-family: Helvetica; 
 
     font-weight: bold; 
 
     border-bottom: 2px solid #107DBA; 
 
     padding-bottom: 5px; 
 
    } 
 
    
 
    #table tr:nth-child(even) { 
 
     background: #e7e7e7; 
 
\t \t border-bottom: 4px solid #ccc; 
 
    } 
 
    
 
    #table td { 
 
     padding: 9px 2px; 
 
     text-transform: capitalize; 
 
     font-size: 15px; 
 
     font-family: Tahoma; 
 
    }
<table id="table"> 
 
    <tr> 
 
    <th>firstname</th> 
 
    <th>lastname</th> 
 
    </tr> 
 
    <tr> 
 
    <td>john</td> 
 
    <td>doe</td> 
 
</tr> 
 
<tr> 
 
    <td>sara</td> 
 
    <td>cein</td> 
 
</tr> 
 
<tr> 
 
    <td>hamid</td> 
 
    <td>hagh</td> 
 
</tr> 
 
<tr> 
 
    <td>maryam</td> 
 
    <td>temori</td> 
 
</tr> 
 
    </table>

関連する問題