Question

我想将所有下拉菜单置于th标题下。
我有什么选择？
我的代码如下：

tr {
  float: left
}

table {
  width: 600px;
}

<table id="CustomerTable">
  <thead>
    <tr>
      <th>No of Puffs </th>
      <th>No Per Day </th>
    </tr>
  </thead>
  <tbody>
    <td class="dropdown">
      <form action="" name="FILTER">
        <select name="filter_for_No_of_Puffs">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
      </form>
    </td>

    <td class="dropdown">
      <form action="" name="FILTER">
        <span style="display:inline-block; width: 30px;">
            <select name="filter_for_No_Per_Day" >
              <option value="0">0</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
          </span>
      </form>
    </td>
  </tbody>
</table>

Answer 1

您的CSS引起了问题。

所有float: left标记上的

<td>都引起了问题，并将所有内容移至左侧，而不管表格的布局如何。您还错过了<tr>中的<tbody>标记

P.S。不知道两列是否需要表width of 600px。因此，基本上删除所有CSS即可解决此问题。

<body> 

<table id="CustomerTable">
        <thead>
        <tr>
            <th>No of Puffs	</th>
            <th>No Per Day	</th>
        </tr>
        </thead>
        <tbody>
             <tr>
             <td class="dropdown">
                 <form action="" name="FILTER">
                     <select name="filter_for_No_of_Puffs" >
                         <option value="0">0</option>
                         <option value="1">1</option>
                         <option value="2">2</option>
                         <option value="3">3</option>
                         <option value="4">4</option>
                          <option value="5">5</option>
                           <option value="6">6</option>
                           <option value="7">7</option>
                           <option value="8">8</option>
                           <option value="9">9</option>
                           <option value="10">10</option>
                     </select>
                 </form>
             </td>
             
             <td class="dropdown">
                 <form action="" name="FILTER">
                 <span style="display:inline-block; width: 30px;">
                     <select name="filter_for_No_Per_Day" >
                         <option value="0">0</option>
                         <option value="1">1</option>
                         <option value="2">2</option>
                         <option value="3">3</option>
                         <option value="4">4</option>
                          <option value="5">5</option>
                           <option value="6">6</option>
                           <option value="7">7</option>
                           <option value="8">8</option>
                           <option value="9">9</option>
                           <option value="10">10</option>
                     </select>
                     </span>
                 </form>
             </td>
             </tr>
        </tbody>
    </table>
</body>

HTML中的td类之间的空间不起作用

1 个答案: