更改表格中的字体颜色

Question

我有一个 html 表格，我想设置表格字体的样式，

 table,
thead,
th {
  color: white;
  border: 1px solid black;
}

 <table class="table table-bordered">
  <thead>
    <tr style="background-color:#3173AD;">
      <th>Action</th>
      <th style="color:white; font-size:10pt;">User Name</th>
      <th style="color:white; font-size:10pt;">User Type</th>
      <th style="color:white; font-size:10pt;">Department</th>
      <th style="color:white; font-size:10pt;">Mobile Number</th>
      <th style="color:white; font-size:10pt;" ng-hide="true"></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="data in getdata">
      <td>
        <a href="#" ng-click="update(data)" class="btn btn-warning active fa fa-edit"></a>
        <a href="#" ng-click="delete(data)" class="btn btn-danger active fa fa-remove"></a>
      </td>
      <td>{{data.Username}}</td>
      <td>{{data.usertype}}</td>
      <td>{{data.designation}}</td>
      <td>{{data.mobilenumber}}</td>
      <td ng-hide="true">{{data.userautoid}}</td>
      <td ng-hide="true">{{data.profile}}</td>
      <td ng-hide="true">{{data.picname}}</td>
      <td ng-hide="true">{{data.email}}</td>
      <td ng-hide="true">{{data.hod}}</td>
    </tr>
  </tbody>
</table>

但是 th 的字体颜色没有改变

以下是我用的，但无法更改颜色

<th style="">User Name</th>

这就是我现在正在做的来解决这个问题

<th style="color:white; font-size:10pt;" ng-hide="true"></th>

这工作正常，但我想使用 css 类

我现在还需要做什么？

原文由 user6656728 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你现在的 css 改变了 th 的字体颜色。但它也会改变整个表格或广告区域的字体颜色。

如果您的要求是仅为 th 更改字体颜色，那么我更喜欢以下 css：

 table thead th { color: white; font-size:10pt; }

原文由 Abhishek 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

另一种方法在这里：

试试这个：

 table#table-custom > thead > tr > th{font-size:25px; background:#3173AD; color:#fff; font-family:arial; padding:5px; text-align:center; vertical-align:center;}
table#table-custom > tbody > tr > td{font-size:15px; background:orange; color:#fff; font-family:impact; letter-spacing:2px; padding:10px; text-align:center; vertical-align:center;}
table#table-custom > tbody > tr > td > a{color:#fff;}

 <table id="table-custom" class="table table-bordered">
		  <thead>
			<tr>
			  <th>Action</th>
			  <th>User Name</th>
			  <th>User Type</th>
			  <th>Department</th>
			  <th>Mobile Number</th>
			  <th></th>
			</tr>
		  </thead>
		  <tbody>
			<tr ng-repeat="data in getdata">
			  <td>
				<a href="#" ng-click="update(data)" class="btn btn-warning active fa fa-edit">Action</a>
				<a href="#" ng-click="delete(data)" class="btn btn-danger active fa fa-remove">Action</a>
			  </td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			</tr>
			<tr ng-repeat="data in getdata">
			  <td>
				<a href="#" ng-click="update(data)" class="btn btn-warning active fa fa-edit">Action</a>
				<a href="#" ng-click="delete(data)" class="btn btn-danger active fa fa-remove">Action</a>
			  </td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			</tr>
			<tr ng-repeat="data in getdata">
			  <td>
				<a href="#" ng-click="update(data)" class="btn btn-warning active fa fa-edit">Action</a>
				<a href="#" ng-click="delete(data)" class="btn btn-danger active fa fa-remove">Action</a>
			  </td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			  <td>Example</td>
			</tr>
		  </tbody>
		</table>

希望对你有帮助！

原文由 Sangrai 发布，翻译遵循 CC BY-SA 3.0 许可协议