0

我有一张桌子。我只希望第一列左对齐，其他列右对齐。我使用以下样式：

<style>
    table{ width:100%;}
    .1col{ text-align:left;}
    .othercols{width:100px;}
    table>tbody>tr>td, table>tbody>tr>th { text-align:center;} 
</style>

然后我有我的桌子：

<table>
    <tr>
        <th class="1col">Category</th>
        <th class="othercols">Some text</th>
        <th class="othercols">Some text</th>
        <th class="othercols">Some text</th>
    </tr>
    <tr >
        <td class="1col">Some text</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

结果是我的 1col 类被忽略了。任何的想法？

4

4 回答 4

8

CSS Class 不能以整数开头，所以试试吧col1。

工作示例：http: //jsfiddle.net/9X7kz/8/

如果您有兴趣，这是完整的语法：

http://www.w3.org/TR/CSS21/grammar.html#scanner

这是特定的规则规范：

http://www.w3.org/TR/CSS21/syndata.html#characters

在 CSS 中，标识符（包括选择器中的元素名称、类和 ID）只能包含字符 [a-zA-Z0-9] 和 ISO 10646 字符 U+00A0 及更高，加上连字符 (-) 和下划线 ( _); 它们不能以数字、两个连字符或一个连字符后跟一个数字开头。标识符还可以包含转义字符和任何 ISO 10646 字符作为数字代码（请参阅下一项）。例如，标识符“B&W？” 可以写成“B\&W\?” 或“B\26 W\3F”。

于 2012-08-15T06:55:01.767 回答
1

CSS 中的任何降序选择器（即从父级选择的任何内容，例如table>tbody>tr>th）都比不降序的选择器（例如任何花园品种div，或.class）更具体。

一般来说，您应该避免这种特殊性，因为它会导致很多问题（就像您现在遇到的问题一样）。

“直接子选择器”只选择直接后代，所以在这里它对你没有任何好处，因为 ath只能从 a 下降，而 a只能从 a 下降。tbodythtr

您应该给表格一个类，并从该类中继承与该元素或子元素有关的所有样式。

此外，在 CSS 中，样式表中更靠后的样式会覆盖上面的样式，这也取决于其他一些加权因素（链接在下面的 steveax 评论中）。

您需要将.1col声明放在更下方以使其优先...并且，根据 SiGanteng 的回答...不要以数字开头的类名。

.table{ width:100%;}
.table .othercols{width:100px;}
.table td, .table th { text-align:center;} 
.table .col1{ text-align:left;}
于 2012-08-15T06:55:45.023 回答
0

更改1col为acol. 这是一个有效的现场演示。这是你想要的吗？

于 2012-08-15T06:58:55.917 回答
0

工作代码：

<style>
    table{ width:100%;}
    .col1{ text-align:left;}
    .othercols{width:100px;}
    table>tbody>tr>td, table>tbody>tr>th { text-align:center;} 
</style>

<table>
<tr>
    <th class="col1">Category</th>
    <th class="othercols">Some text</th>
    <th class="othercols">Some text</th>
    <th class="othercols">Some text</th>
</tr>
<tr >
    <td class="col1">Some text</td>
    <td></td>
    <td></td>
    <td></td>
</tr>

于 2012-08-15T08:55:11.693 回答