英文:
HTML tables with different styles
问题
我页面上有两个完全不同样式的HTML表格。我不希望第一个HTML表格的样式影响第二个HTML表格的样式，但不知何故，一旦我定义了第二个HTML表格的样式，第一个HTML表格也受到影响。
下面是这两个表格：
<table class="table table-bordered table-responsive table-hover">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<table class="aTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
样式表：
.table tr:nth-child(even) {
background: #FFF;
}
.table tr:nth-child(odd) {
background: #D8EBFB;
}
.table tr:first-child {
background: #add8e6;
}
.aTable {
width: 85%;
}
.aTable th, td {
border: 1px solid black;
background-color: #DDD;
}
使用上述样式表后，表格应如下所示：
底部的表格没有问题，但一旦添加aTable样式，顶部的表格开始显示垂直线，底部的表格消失。如果移除aTable样式，顶部的表格看起来像这样，没有垂直线：
我如何保持顶部表格不变，底部表格使用.atable样式，而不影响彼此的样式？我希望底部表格看起来像这样：
英文:
I have two HTML tables on my page with two totally different styles. I don't want the style of first HTML table affecting the style of second HTML table, but somehow as soon as I define the style of second HTML table, the first HTML table gets affected too.
Below are the tables:
<table class="table table-bordered table-responsive table-hover">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<table class="aTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
stylesheet:
.table tr:nth-child(even) {
background: #FFF;
}
.table tr:nth-child(odd) {
background: #D8EBFB;
}
.table tr:first-child {
background: #add8e6;
}
.aTable{
width:85%;
}
.aTable th, td {
border: 1px solid black;
background-color: #DDD;
}
How the table should look like with the above style sheet:
.
The bottom table is fine, but the top table starts showing the vertical lines once I add the aTable stylesheet. Also, the bottom disappears. If I remove the aTable stylesheet, the top table looks like this with no vertical lines:
How can I keep the top table as it is and the bottom table with .atable stylesheet without affecting the tables with each other's styles? I want the bottom table to look like this:
答案1
得分: 1
你只需要指定要为哪个表格的单元格应用样式。
使用.aTable td，而不仅仅使用td，因为它将应用于HTML中所有的td标签。
.table tr:nth-child(even) {
background: #FFF;
}
.table tr:nth-child(odd) {
background: #D8EBFB;
}
.table tr:first-child {
background: #add8e6;
}
.aTable {
width: 85%;
}
.aTable th,
.aTable td {
border: 1px solid black;
background-color: #DDD;
}
<table class="table table-bordered table-responsive table-hover">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<table class="aTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
英文:
you just need to specify which table td you want to apply styling for.
Use
.aTable td instead of just using td as it will be applied for all td tags within your HTML
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.table tr:nth-child(even) {
background: #FFF;
}
.table tr:nth-child(odd) {
background: #D8EBFB;
}
.table tr:first-child {
background: #add8e6;
}
.aTable {
width: 85%;
}
.aTable th,
.aTable td {
border: 1px solid black;
background-color: #DDD;
}
<!-- language: lang-html -->
<table class="table table-bordered table-responsive table-hover">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<table class="aTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<!-- end snippet -->
答案2
得分: 0
以下是要翻译的内容：
这是你的错误。.aTable th, td 这行样式将应用于所有的 td。
应该是：
.aTable th, .aTable td {
border: 1px solid black;
background-color: #DDD;
}
英文:
Here is your mistake .aTable th, td this line in the style will set to all tds.
Should be:
.aTable th, .aTable td {
border: 1px solid black;
background-color: #DDD;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论