Question

如果我想以不同于外表的方式处理嵌入在单元格中的表的属性，则需要什么。我是CSS新手，没有处理级联效果。我尝试的一个煮沸的例子如下：

<body>
<table><link rel="stylesheet" type="text/css" href="OuterTable.css">
    <tr><th>Col1</th><th>Col2</th></tr>
    <tr>
    <td>
        <table><link rel="stylesheet" type="text/css" href="InnerTable.css"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
    </td>
    <td>
            <table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
    </td>
    </tr>            
</table>
</b

OuterTable.css指定单元格的粉红色背景，而InnerTable.css指定单元格的黄色。显然，我遗漏了一些基本的东西，因为所有标题样式都有黄色背景。样式化内部表的最佳方法是什么。

Answer 1

a）将类（内部和外部，如下所示）添加到表

b）从表中删除你的CSS文件并添加到头

c）只需将以下样式语句添加到css中。

<style type="text/css">
   table.outer {
     background-color:yellow
    }
  table.outer th {
      // add style properties here
   }
   table.inner {
       background-color:pink
   }
  table.inner th {
     // add style properties here
   }
</style>

<table class="outer">
   <tr><th>Col1</th><th>Col2</th></tr>
   <tr>
    <td>
      <table class="inner"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
   </td>
   <td>
        <table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
   </td>
  </tr>            
</table>

Answer 2

首先，请勿在HTML代码中间导入CSS，请将其放在<head>标记上。

您可以通过“id”或“class”设置HTML元素的样式，我将使用类进行示例，检查它：

<head>
<link rel="stylesheet" type="text/css" href="OuterTable.css">
<link rel="stylesheet" type="text/css" href="InnerTable.css">

<style>

.outerTable{
    background-color:#FF0000;
}    

.innerTable{
    background-color:#FF00FF;
} 
</style>
</head>
<body>
 <table class="outerTable">
 <tr><th>Col1</th><th>Col2</th></tr>
  <tr>
    <td>
      <table class="innerTable"><tr><th>InsideColA1</th><th>InsideColA2</th></tr></table>
    </td>
    <td>
        <table><tr><th>InsideColB1</th><th>InsideColB2</th></tr></table>
    </td>
   </tr>            
  </table>
</body>

而是<style>标记的类，您将代码放在.css文件

看到它在：http://jsfiddle.net/U5cUK/

Answer 3

首先，所有CSS文件都应包含在HTML文档的<head>中。

现在，如果你想定位一个嵌套表，你所要做的就是使用这样的descendant selector：

/*Define default color for cells*/
table th{
    background-color: pink; 
}
/*Override for headers inside a nested table*/
table table th{
    background-color: yellow; 
}

无需单独的CSS文件或自定义类或ID

参见 Demo fiddle

如何更改内部表属性

3 个答案: