无法更改表格中的文字字体/重量或任何东西？

Question

所以我在尝试更改我的table的thead的字体系列，重量和尺寸时遇到了问题。

我已经尝试添加style=""并以这种方式插入代码，但没有任何变化。

HTML：

<div class="box"> 
<table> 
<thead style="font-weight:bold;">Food & Prices</thead> 
<tr class="special"> 
    <td>Item</td> 
    <td>Cost</td> 
    <td>Weight</td> 
    <td>Availability</td> 
</tr> 
<tr> 
    <td>Chocolate Waffle</td> 
    <td>$394.48</td> 
    <td>21LBS</td> 
    <td>Sedro Woolley</td> 
</tr> 
<tr> 
    <td>Sprinkle Waffle</td> 
    <td>$12.04</td> 
    <td>5LBS</td> 
    <td>Sedro Woolley & Burlington</td> 
</tr> 
<tr> 
    <td>Cherry Waffle</td> 
    <td>$244.00</td> 
    <td>4.5LBS</td> 
    <td>Mount Vernon</td> 
</tr> 
<tr> 
    <td>Tamale Waffle</td> 
    <td>$1.99</td> 
    <td>100LBS</td> 
    <td>Sedro Woolley & Stanwood</td> 
</tr> 
<tr> 
    <td>Blueberry Waffle</td> 
    <td>$4.05</td> 
    <td>1.24LBS</td> 
    <td>Burlington & Mount Vernon</td> 
</tr> 
<tr> 
    <td>M&M Waffle</td> 
    <td>$30.40</td> 
    <td>1.1LBS</td> 
    <td>Stanwood</td> 
</tr> 
<tr> 
    <td>Coconut Waffle</td> 
    <td>$0.99</td> 
    <td>0.01LBS</td> 
    <td>Sedro Woolley</td> 
</tr> 
<tr> 
    <td>Unicorn Dust Waffle</td> 
    <td>$666.66</td> 
    <td>66LBS</td> 
    <td>Sedro Woolley & Mount Vernon</td> 
</tr> 
<tr> 
    <td>Ketchup Waffle</td> 
    <td>$439.33</td> 
    <td>19.4LBS</td> 
    <td>Burlington</td> 
</tr> 
<tr> 
    <td>Strawberry Waffle</td> 
    <td>$5.50</td> 
    <td>3.2LBS</td> 
    <td>All Locations</td> 
</tr> 
<tr> 
    <td>Coffee Waffle</td> 
    <td>$3.12</td> 
    <td>3.2LBS</td> 
    <td>Burlington & Mount Vernon</td> 
</tr> 
<tr> 
    <td>School Lunch Waffle</td> 
    <td>$2.50</td> 
    <td>0.25LBS</td> 
    <td style="font-weight:bold;">No longer in stock by demand!</td> 
</tr> 
<tr> 
    <td>Spoon Waffle</td> 
    <td>$31.01</td> 
    <td>2LBS</td> 
    <td>All Locations</td> 
</tr> 
<tr> 
    <td>Paper Waffle</td> 
    <td>$58.48</td> 
    <td>0.1LBS</td> 
    <td>Stanwood</td> 
</tr> 
<tr> 
    <td>Tears from a God Waffle</td> 
    <td>$77777777.77</td> 
    <td>$777LBS</td> 
    <td>Sedro Wolley</td> 
</tr> 
</table> 
</div> 

CSS：

table{ 
width:1000px; 
margin:auto; 
text-align:center; 
display:block; 
} 
table td{ 
width:250px; 
padding-top:5px; 
padding-bottom:5px; 
} 
table tr{ 
border-bottom:1px solid #444; 
} 
.special{ 
font-weight:bold; 
} 
.ok { 
font-weight:bold; 
font-family:Verdana; 
font-size:22px; 
color:#444; 
font-weight:bold; 
} 
table thead{ 
font-weight:bold; 
font-family:Verdana; 
font-size:22px; 
color:#444; 
} 

Answer 1

你仍然需要定义一个细胞。就像这样：

<thead style="font-weight:bold;"><tr><th>Food & Prices</th><tr></thead> 

如果你想你的头跨越到coumns，加合并单元格= “2” 是这样的：

<thead style="font-weight:bold;"><tr><th colspan="2">Food & Prices</th></tr></thead> 

在这里看到的jsfiddle：https://jsfiddle.net/nxp86d59/2/

Answer 2

标签善有善报您包含您的列的标题，所以你的球应该看起来像这样

<thead> 
    <tr class="special"> 
     <td>Item</td> 
     <td>Cost</td> 
     <td>Weight</td> 
     <td>Availability</td> 
    </tr> 
</thead> 

对于你的标题，你可能只需要使它成为一个H3，要么就是与合并单元格一个TD另一行= 4

<thead> 
    <tr> 
     <td colspan=4>Food & Prices</td> 
    </tr> 
    <tr class="special"> 
     <td>Item</td> 
     <td>Cost</td> 
     <td>Weight</td> 
     <td>Availability</td> 
    </tr> 
</thead> 

对不起 - 这些应该是由朱利安·格雷

指出了THEAD个标签

Answer 3

如果使用THEAD元素应该有表没有直接的孩子，是TR元素 - 它们必须是tbody元素中 - 同样是冷静和改变&为HTML友好& :-)

见下：

<div class="box"> 
    <table> 
    <thead> 
     <tr> 
     <th colspan="4">Food &amp; Prices</th> 
     </tr> 

     <tr> 
     <th>Item</th> 

     <th>Cost</th> 

     <th>Weight</th> 

     <th>Availability</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
     <td>Chocolate Waffle</td> 

     <td>$394.48</td> 

     <td>21LBS</td> 

     <td>Sedro Woolley</td> 
     </tr> 

     <tr> 
     <td>Sprinkle Waffle</td> 

     <td>$12.04</td> 

     <td>5LBS</td> 

     <td>Sedro Woolley &amp; Burlington</td> 
     </tr> 

     <tr> 
     <td>Cherry Waffle</td> 

     <td>$244.00</td> 

     <td>4.5LBS</td> 

     <td>Mount Vernon</td> 
     </tr> 

     <tr> 
     <td>Tamale Waffle</td> 

     <td>$1.99</td> 

     <td>100LBS</td> 

     <td>Sedro Woolley &amp; Stanwood</td> 
     </tr> 

     <tr> 
     <td>Blueberry Waffle</td> 

     <td>$4.05</td> 

     <td>1.24LBS</td> 

     <td>Burlington &amp; Mount Vernon</td> 
     </tr> 

     <tr> 
     <td>M&amp;M Waffle</td> 

     <td>$30.40</td> 

     <td>1.1LBS</td> 

     <td>Stanwood</td> 
     </tr> 

     <tr> 
     <td>Coconut Waffle</td> 

     <td>$0.99</td> 

     <td>0.01LBS</td> 

     <td>Sedro Woolley</td> 
     </tr> 

     <tr> 
     <td>Unicorn Dust Waffle</td> 

     <td>$666.66</td> 

     <td>66LBS</td> 

     <td>Sedro Woolley &amp; Mount Vernon</td> 
     </tr> 

     <tr> 
     <td>Ketchup Waffle</td> 

     <td>$439.33</td> 

     <td>19.4LBS</td> 

     <td>Burlington</td> 
     </tr> 

     <tr> 
     <td>Strawberry Waffle</td> 

     <td>$5.50</td> 

     <td>3.2LBS</td> 

     <td>All Locations</td> 
     </tr> 

     <tr> 
     <td>Coffee Waffle</td> 

     <td>$3.12</td> 

     <td>3.2LBS</td> 

     <td>Burlington &amp; Mount Vernon</td> 
     </tr> 

     <tr> 
     <td>School Lunch Waffle</td> 

     <td>$2.50</td> 

     <td>0.25LBS</td> 

     <td style="font-weight:bold;">No longer in stock by demand!</td> 
     </tr> 

     <tr> 
     <td>Spoon Waffle</td> 

     <td>$31.01</td> 

     <td>2LBS</td> 

     <td>All Locations</td> 
     </tr> 

     <tr> 
     <td>Paper Waffle</td> 

     <td>$58.48</td> 

     <td>0.1LBS</td> 

     <td>Stanwood</td> 
     </tr> 

     <tr> 
     <td>Tears from a God Waffle</td> 

     <td>$77777777.77</td> 

     <td>$777LBS</td> 

     <td>Sedro Wolley</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Answer 4

看看jsfiddle

您的html是什么是需要更正。您没有正确关闭<thead>元素。并且您未能使用<tbody>元素。现在应该正常工作

注：

这将是更更好，如果你把“食品和价格”的地方所以帽子也不会打扰表内容的表格上方。

<div class="box"> 
    <div class="table-heading"> 
     Food & Prices 
    </div> 
<table> 
<thead style="font-weight:bold;"> 
<tr class="special"> 
    <td>Item</td> 
    <td>Cost</td> 
    <td>Weight</td> 
    <td>Availability</td> 
</tr> 
    </thead> 

https://jsfiddle.net/gtxmqvov/

Answer 5

也许你可以尝试添加一个类，然后添加到CSS的thead.class。我不确定，因为您的代码似乎没有任何错误。