更改字体颜色表日

我有一个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类

更重要的是我现在需要做什么？

来源

2017-02-10 Mumbai Wadala

你放的css的定义，必须工作 –

它似乎对我很好：https://jsfiddle.net/rcygmh08/ – Toastrackenigma

这可能是你的CSS文件没有被应用，你有一个覆盖它的规则（即稍后在CSS或内联中应用相同的选择器），则会有更具体的规则优先。首先，对于特定风格的表格应用类可能是一个不错的主意，因此只有你想要的表格才能被样式化，然后Chrome/Firefox的开发工具可以帮助检查哪些规则没有被应用或者懒惰 - 颜色：白色！重要的;''除非有另一个'重要的'规则被应用于'颜色'，否则prob将导致它被应用 – Brian

您现在的css更改th的字体颜色。但它也会更改整个表格或地区的字体颜色。

如果你的要求是只改变了日字体颜色，那么我宁愿以下的CSS：

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

来源

2017-02-10 07:04:14 Abhishek

我认为你需要用样式th划分样式table，因为白字在TBODY是无形的，并且定义其他样式th：

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

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

来源

2017-02-10 07:06:52 Banzay

另一种方法是在这里：

试试这个：

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

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

希望这将帮助你！

来源

2017-02-10 08:03:53 Sangrai

更改字体颜色表日

回答

相关问题