Question

我希望修复表中三列的宽度（以像素为单位），而不会通过样式影响其他表。我可以通过设置列的样式来实现所需的效果，请参阅下面的代码。但是，下面列中的样式未链接到特定表。我希望使用样式，这样我每次使用指定的表时都不需要使用<col ...>行。即我想要做的是将列宽固定到特定的表格。下面的代码没有将col.tablerightcol1链接到table.tableright，这是我想要做的。

<head>
<title> xxxxx </title>
<style type="text/css">

table.tableleft { 
          width: 140px ;
        align centre ; 
        }


table.tableright { 
          background-color: #E8E8E8 ; 
        width: 840px ; 
        height: 220px ;
         }

col.tablerightcol1 { 
          align: right ;
          width:220px ;
         }
col.tablerightcol2 { 
          align: center ;
          width:400px ;
         }
col.tablerightcol3 { 
          align: center ;
          width:220px ;
         }

</style>
</head>

<html>
<body >
<table border=2 class = "tableright" >
  <col class="tablerightcol1" />
  <col class="tablerightcol2" />
  <col class="tablerightcol3" />
    <tr>
        <td >
....

Answer 1

您可以使用CSS3 nth-child伪类选择器，但任何最高8.0版本的IE都不支持它（详见http://reference.sitepoint.com/css/pseudoclass-nthchild）。

table.tableright col:nth-child(1) { align: right; width:220px; }

Answer 2

您可以让选择器考虑到这一点，例如：

table.tableright col.col1 { align: right; width:220px; }
table.tableright col.col2 { align: center; width:400px; }
table.tableright col.col3 { align: center; width:220px; }

匹配标记：

<table border="2" class="tableright" >
  <col class="col1" />
  <col class="col2" />
  <col class="col3" />

这样，只有<col>元素位于<table class="tableright">元素内时，您的样式才会影响{{1}}元素。

特定表中列的样式（固定宽度），而不影响其他表

2 个答案: