Question

因此，我无法尝试更改thead table的字体系列，重量和大小。

我尝试添加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，请像这样添加colspan =“2”：

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

请在此处查看jsfiddle：https://jsfiddle.net/nxp86d59/2/

Answer 2

标记围绕您的行包含列的标题，因此您的thead应如下所示

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

对于你的标题，你可能只需要使用带有colspan = 4的td将其设为h3或其他行或其他行

<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>

对不起 - 正如JulienGrégoire所指出的那些应该是thead中的标签

Answer 3

如果你使用thead元素，那么表格中没有直接的子元素是tr元素 - 它们必须在tbody元素内 - 也很酷并且将&更改为html friendly &： - ）

见下文：

<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

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

无法更改文字字体/重量或桌面上的任何内容？

5 个答案: