Question

我在HTML表格中有两行。第一行中的第一列基于第二列（这是沃尔沃这是沃尔沃）跨越第二行。

我希望这两行基于默认值/大小独立跨越。

HTML code：

<table>
<tr>
  <td>
  <input type="text" placeholder='firstname'>
  </td>
    <td>
  <input type="text" placeholder='Lastname'>
  </td>
</tr>
<tr>
  <td>
  <select>
  <option value="volvo">This is a Volvo This is a Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
  </td>
</tr>

</table>

Answer 1

您可以在选择槽CSS

上设置宽度

select{
  max-width: 100px; /* or width: 100px */
}

因此它不会跨越表列。

编辑：Example

Answer 2

我不确定你是否想要这个：

<table>
  <tr>
    <td>
      <input type="text" placeholder='firstname'>
    </td>
    <td>
      <input type="text" placeholder='Lastname'>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <select style="width:100%">
        <option value="volvo">This is a Volvo This is a Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </td>
  </tr>
</table>

如果您不想要100％宽度的选择，只需删除样式属性

即可

HTML表行基于第二行扩展

2 个答案: