Цвет рамки + цвет шрифта в HTML?

Question

Как мне присвоить цвет таблице tr вместе с отдельным цветом границы.

Это мои свойства в стиле 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>

мне нужно дать черный цвет границы и цвет шрифта, как белый с цвет фона, как темно-серый.

Как это сделать?

Answer 1

Вам нужно применить границу на td

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

border будет применяться со всех 4-х сторон. Вы можете изменить пограничные стороны с border-top, border-bottom, border-left, border-right

Answer 2

Border не допускается для строк таблицы, но только для целых таблиц или ячеек таблицы. Однако вы можете использовать свойство контура для рисования границы. Он не учитывается только в полевой модели, и вы не можете устанавливать отдельные стороны с точки зрения цвета, стиля или ширины.

Чтобы выбрать конкретную строку, используйте псевдокласс на 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>

Answer 3

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