Question

我对html / css很不好，所以我只是想知道我是否能得到你的帮助。

这是这张表fiddle的小提琴。您可以看到每个td行的宽度相同。但是，我希望，例如，左侧的列为200 px，右侧的列为50 px。

如果我要拥有大量行，最有效的方法是什么？

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

CSS

 th,td {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 18px;
        color: #000000;
    }
    tr {
        border: 1px solid gray;
    }
    td {
        width:200px;
        padding:3px;
    }
    th {
        background-color:#D2E0E8;
        color:#003366
    }
    table {
        border: 1pt solid gray;
    }

Answer 1

您可以通过在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>
   ...

Answer 2

请注意，您不需要在<td>上的每个<th>设置样式。所有上述答案都可行，但我更愿意在<th>上设置一个类并以这种方式应用宽度样式。

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

   ....

</table>

和CSS：

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

.header-50 {
    width: 50px;
}

只是我的风格。我不喜欢内联样式，只是因为你可能希望以不同的方式设置标题样式。如果你不需要，内联工作正常。

Answer 3

您可以使用COL元素。

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

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

关于样式表的相当基本的问题

3 个答案: