如何在html中的tr标签上使用CSS [英] How to use a CSS on tr tag in html

查看:597
本文介绍了如何在html中的tr标签上使用CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好我无法在tr标签上使用css我已经为tr标签声明了.name类但是它没有对行进行任何更改,请提供一些解决方案,了解如何在tr上使用css

< style>

 table.gridtable td {
border-width:1px;
填充:8px;
border-style:solid;
border-color:#666666;
background-color:#ffffff;
}

table.gridtable tr.name {
background-color:#999999;
border-width:1px;

}

< / style < span class =code-keyword>>
< / head >
< body >

< class = gridtable >
< tr >
< ; th > 信息标题1 < ; / th > < th > 信息标题2 < / th > < th > 信息标题3 < / th >
< / tr >
< tr >
< < span class =code-leadattribute> td > 文字1A < / td > < td > 文字1B < / td > < td > 文字1C < / td >
< / tr >
< tr >
< td > 文字2A < / td > < td > 文字2B < / td > < td > 文字2C < / td >
< / tr >
< tr class = 名称 >
< ; td > 测试tr.name类 < / td > < td > Text32B < / td > < td > 文字3C < < span class =code-leadattribute> / td >
< / tr >

解决方案

这是因为所有的td都遵循这个:

 table.gridtable td 



您必须在tr.name之后添加一个td来指定最后一个tr中的td

 table.gridtable tr.name td {


因为您为表设置了背景颜色,所以它可能不会覆盖该行的样式。尝试使用!对于tr行类很重要

 table.gridtable tr.name {
background-color:#999999!important;
border-width:1px;

}





其他试试这个

 <      class     = 表格 >  
< tr >
< td > red < / td >
< / tr >
< tr >
< td > red < / td >
< / tr >
< tr class = blue >
< td > blue < / td >
< / tr >
< tr >
< td > blue < / td >
< / tr >
< / table >



。blue {
background-color:blue;
}
.table
{
background-color:orange;
}
}


Hi I am not able to use css on tr tag i have declared .name class for tr tag but it is not making any change on the row, please provide some solution that how to use css on tr
<style>

table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}

table.gridtable tr.name {
    background-color: #999999;
        border-width: 1px;

}

</style>
</head>
<body>

<table class="gridtable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr class="name">
    <td>Test on tr.name Class</td><td>Text32B</td><td>Text 3C</td>
</tr>

解决方案

that is because all the td has follow this:

table.gridtable td 


You have to specify the td in the last tr by adding a td after the tr.name

table.gridtable tr.name td {


since you set background color for the table, it might not be overriding that style for the row. try using !important for the tr row class

table.gridtable tr.name {
    background-color: #999999 !important;
        border-width: 1px;
 
}



else try this

<table class = "table">
  <tr >
    <td>red</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr class="blue">
    <td>blue</td>
  </tr>
  <tr>
    <td>blue</td>
  </tr>
</table>


.blue {
    background-color: blue;
}
.table
{
    background-color: orange;
}
}


这篇关于如何在html中的tr标签上使用CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆