HTML中两个表格使用不同的CSS

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML中两个表格使用不同的CSS相关的知识，希望对你有一定的参考价值。

比如我做两个表格，第一个表格使用定义好样式，而第二个我只想做个普通的表格，没有任何样式，请教应该怎么做？谢谢。
<style>
table tr:first-childbackground:#0066CC; color:#fff;font-weight:bold; /*第一行标题蓝色背景*/
tableborder-top:1pt solid #C1DAD7;border-left:1pt solid #C1DAD7;margin: 0 auto;
td padding:5px 10px; text-align:center;border-right:1pt solid #C1DAD7;border-bottom:1pt solid #C1DAD7;
tr:nth-of-type(odd) background:#F5FAFA; /* odd 标识奇数行，even标识偶数行 */
tr:hover background: #E0F0F0; /*鼠标悬停后表格背景颜色*/
</style>

第一个表格使用上面样式
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td><div align="left" class="STYLE1">neirong1</div></td>
</tr>
<tr>
<td><div align="left">neirong2</div></td>
</tr>
<tr>
<td><div align="left">neirong3</div></td>
</tr>
</tbody></table><br /><br/>
其他内容。。。。。

第二个表格不想使用上面的样式，只想做普通的表格。
<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td><div align="left">neirong4</div></td>
</tr>
<tr>
<td><div align="left">neirong5</div></td>
</tr>
<tr>
<td><div align="left">neirong6</div></td>
</tr>
</tbody></table><br /><br/>

你的样式这么定义就是全局的了。给个样式名称。

<table class="mytable" >
    ....
</table>

    /*第一行标题蓝色背景*/
    .mytable tr:first-child 
        background: #0066CC;
        color: #fff;
        font-weight: bold;
     
    .mytable 
        border-top: 1pt solid #C1DAD7;
        border-left: 1pt solid #C1DAD7;
        margin: 0 auto;
    
    .mytable td 
        padding: 5px 10px;
        text-align: center;
        border-right: 1pt solid #C1DAD7;
        border-bottom: 1pt solid #C1DAD7;
    
    /* odd 标识奇数行，even标识偶数行 */
    .mytable tr:nth-of-type(odd) 
            background: #F5FAFA;
    
    /*鼠标悬停后表格背景颜色*/
    .mytable tr:hover 
            background: #E0F0F0;
    

追问

还得请教，第一行的背景是蓝色
.mytable tr:first-child
background: #0066CC;
color: #fff;
font-weight: bold;
实际没有显示出效果，您帮我看下，需要怎样修改，谢谢。

 参考技术A 你定义的css使用的元素选择器是标签，要单独定义class, 然后在html中制定给相应的表。
比如
在 CSS 中，类选择器以一个点号显示：
.center text-align: center

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

参考：
http://www.w3school.com.cn/css/css_syntax_class_selector.asp 参考技术B .style1 tr:first-child .......
.style1 ......
.style1 td......
.style1 tr:nth-of-type(odd) ......
.style1 tr:hover......

<table class='style1'> 参考技术C 给第一个table加一个class，例如class=“table”，然后样式都写在.table下就好了 参考技术D 表格的样式放在需要的里面，你全局的，肯定2个都有。

HTML 一个HTML表格，使用CSS突出显示具有不同颜色的奇数行和偶数行 - 由W3Schools提供

&lt;html&gt;
&lt;head&gt;
&lt;style type=&quot;text/css&quot;&gt;
#customers
{
font-family:&quot;Trebuchet MS&quot;, Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th 
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td 
{
color:#000000;
background-color:#EAF2D3;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;table id=&quot;customers&quot;&gt;
&lt;tr&gt;
  &lt;th&gt;Company&lt;/th&gt;
  &lt;th&gt;Contact&lt;/th&gt;
  &lt;th&gt;Country&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
&lt;td&gt;Maria Anders&lt;/td&gt;
&lt;td&gt;Germany&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;alt&quot;&gt;
&lt;td&gt;Berglunds snabbköp&lt;/td&gt;
&lt;td&gt;Christina Berglund&lt;/td&gt;
&lt;td&gt;Sweden&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Centro comercial Moctezuma&lt;/td&gt;
&lt;td&gt;Francisco Chang&lt;/td&gt;
&lt;td&gt;Mexico&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;alt&quot;&gt;
&lt;td&gt;Ernst Handel&lt;/td&gt;
&lt;td&gt;Roland Mendel&lt;/td&gt;
&lt;td&gt;Austria&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Island Trading&lt;/td&gt;
&lt;td&gt;Helen Bennett&lt;/td&gt;
&lt;td&gt;UK&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;alt&quot;&gt;
&lt;td&gt;Königlich Essen&lt;/td&gt;
&lt;td&gt;Philip Cramer&lt;/td&gt;
&lt;td&gt;Germany&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
&lt;td&gt;Yoshi Tannamuri&lt;/td&gt;
&lt;td&gt;Canada&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;alt&quot;&gt;
&lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
&lt;td&gt;Giovanni Rovelli&lt;/td&gt;
&lt;td&gt;Italy&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;North/South&lt;/td&gt;
&lt;td&gt;Simon Crowther&lt;/td&gt;
&lt;td&gt;UK&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class=&quot;alt&quot;&gt;
&lt;td&gt;Paris spécialités&lt;/td&gt;
&lt;td&gt;Marie Bertrand&lt;/td&gt;
&lt;td&gt;France&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

以上是关于HTML中两个表格使用不同的CSS的主要内容，如果未能解决你的问题，请参考以下文章

求求高手，怎样给两个表格定义不同的的CSS，这个css是链接特效

不同的 JEditorPanes 显示 html 内容，使用相同的 css 规则

在页面中我想让两个table表格并列有啥方法吗（vue+element）

css中两个不同的类名（class）怎么同时选择？

HTML CSS样式 怎样给一个表格添加两个class样式

两个不同页面上的两个元素可以在 HTML/CSS 中具有相同的 ID 吗？