Html 关于表格样式的基本问题

我对html/css非常不熟悉，所以我想知道是否能得到你的帮助

这张桌子有一把小提琴。您可以看到，每个td行的宽度相同。但是，我希望，例如，列在左边200像素，列在右边50像素

如果我要有很多行，实现这一点最有效的方法是什么

 <table id="theList">
        <thead>
        <tr>
          <th >Item</th>
          <th >Price</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>Milk</td>
          <td>1.99</td>
      </tr>
      <tr>
          <td>Eggs</td>
          <td>2.29</td>
      </tr>


      </tbody>
    </table>

---

可以通过将内联样式写入HTML标记来实现这一点

<table id="theList">
  <thead>
    <tr>
      <th style="width: 200px;">Item</th>
      <th style="width: 50px;">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 200px;">Milk</td>
      <td style="width: 50px;">1.99</td>
   ...

项目
价格
牛奶
1.99
...

请记住，您不需要在每个

上设置样式，只需在

上设置样式即可。以上所有答案都可以，但我更愿意在

上设置一个类，并以这种方式应用宽度样式

<table id="theList">
        <thead>
        <tr>
          <th class='header-250' >Item</th>
          <th class='header-50' >Price</th>
      </tr>

   ....

</table>

正是我的风格。我不喜欢内联样式，只是因为一个简单的事实，你可能想改变标题的样式。如果您不需要，内联就可以了。

您可以使用该元素

.
.
.

---

就个人而言，我会使用内联样式在第一行的所有列上指定宽度（如果表本身有宽度，则除了一列之外，其他所有列都有宽度）。

我通常将这些宽度内联，并且只在前两列上使用，例如

和

，因为我几乎不会重复使用它们来保证为它们设置样式。

<table id="theList">
        <thead>
        <tr>
          <th class='header-250' >Item</th>
          <th class='header-50' >Price</th>
      </tr>

   ....

</table>

.header-250 {
    width: 250px;
    color: red; //example
}

.header-50 {
    width: 50px;
}

<table id="theList">
    <col class="column1" style="width: 200px;">
    <col class="column2" style="width: 50px;">
    .
    .
    .
</table>