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

表行不允许使用边框，但仅适用于整个表或表格单元格。但是，您可以使用outline属性绘制边框。它只是不计入盒子模型，你不能在颜色，样式或宽度方面设置单独的边。

要选择特定行，请使用tr上的伪类。

＆＃13;

td {
  padding: 1em 2em;
}

tr:hover {
  background: #666;
  outline: 1px solid black;
  color: white;
}

＆＃13;

<table cellspacing="0">
  <tr><td>1</td><td>2</td></tr>
  <tr><td>3</td><td>4</td></tr>
</table>

＆＃13;

Answer 3

＆＃13;

#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;
		border-bottom: 4px solid #ccc;
    }
    
    #table td {
        padding: 9px 2px;
        text-transform: capitalize;
        font-size: 15px;
        font-family: Tahoma;
    }

＆＃13;

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

＆＃13;

HTML中的边框颜色+字体颜色？

3 个答案: