Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

但th的字体颜色没有改变

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

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

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

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

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

我现在还需要做什么？

Answer 1

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

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

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

Answer 2

我认为您需要将table的样式与th的样式分开，因为tbody中的白色文本是不可见的，并为th定义了其他样式：

＆＃13;

table, thead, th {
    border:1px solid black;
}
th {
  color:white;
  font-size:10pt;
}

＆＃13;

<table class="table table-bordered">
                                <thead>
                                    <tr style="background-color:#3173AD;">
                                        <th>Action</th>
                                        <th>User Name</th>
                                        <th>User Type</th>
                                        <th>Department</th>
                                        <th>Mobile Number</th>
                                        <th 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>

＆＃13;

Answer 3

另一种方法是：

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会对你有帮助！

更改表格中的字体颜色

3 个答案: