css:css 标签在 td 元素中不起作用

Question

我在做一些应该很简单的事情时遇到了麻烦，为用于月历的表格设置了 td 标签的样式。

月历顶部有天数。我想设置天的字体以及列的宽度。但是，以下看似简单的代码不起作用。我想我一定遗漏了一些明显的东西。 jsfiddle和代码:

html

<table><tr><td class="dayhead">Monday</td>
    <td class="dayhead">Tuesday</td>
    <td class="dayhead">Wednesday</td>
    <td class="dayhead">Thursday</td>
    <td class="dayhead">Friday</td>
    <td class="dayhead">Saturday</td>
     <td class="dayhead">Sunday</td>
</tr></table>

CSS

td.dayhead {
         font-size:14;
    width:70px;
    column-width:70px;
    padding:5px; 
    -moz-column-width:70px; /* Firefox */
    -webkit-column-width:70px; /* Safari and Chrome */
}

对于我做错了什么的任何建议，我将不胜感激。

Answer 1

它确实有效，现在我不明白你为什么需要这些属性？由于它们尚未得到广泛支持，尤其是 IE 将成为您的游戏剧透

column-width:70px;
-moz-column-width:70px; /* Firefox */
-webkit-column-width:70px; /* Safari and Chrome */

如果您需要固定宽度的列，请使用 table-layout: fixed; 并像这样为您的表格分配一些 fixed 宽度，现在您的列将不灵活宽度

table {
    table-layout: fixed;
    width: 500px
}

Demo

同样在您的 font-size 属性上，您没有使用任何 unit 因此它不适用

---

如果您有兴趣重构您的标记，usinf CSS nth-of-type() 将帮助您

table tr:nth-of-type(1) td {
   /* Styles */
}

这样你就不必在每个单元格上使用类

Demo