html - CSS - 表格单元格 - 最小宽度 - 百分比和像素 : How to solve this?

Question

有一些类似的问题，但到目前为止我没有找到满意的答案。我有一个像示例中那样的响应表(实际上是 WordPress 管理员)。

HTML 只能在一定程度上进行更改 - 我必须使用表格。我希望单元格具有以像素为单位的最小宽度和以百分比为单位的最小宽度。

像这样:

.input-cell {
    min-width:40%;
    min-width:200px;
}

只有第二个属性会采取行动，因此这无济于事。更糟的是min-width无论天气如何，我都无法使用表格单元格 table-layout:fixed或 table-layout:auto; .

以下示例演示了带有普通 width 的表风格。

table {
   width:100%;
   table-layout:auto;
}

.input-cell {
   width:40%;
}

textarea, input {
  width:95%;
}

<table>
<thead>
    <tr valign="top">
        <th scope="row">Setting</th>
        <th scope="row">Value</th>
        <th scope="row">Beschreibung</th>
        <th scope="row">ID</th>
    </tr>
</thead>
<tbody>
<tr valign="top">
  <td valign="top">Post Widget: Output callbacks</td>
  <td valign="top" class="input-cell">
    <textarea id="foo" name="bar" rows="7">Lorem ipsum ...</textarea>
  </td>
  <td class="description" valign="top">Lorem ipsum dolor sit amet.</td>
  <td class="cis_field_id" valign="top">master_cum_esse_sunc_veniat</td>
</tr>
<tr valign="top">
  <td valign="top">Post Widget: Output callbacks</td>
  <td valign="top" class="input-cell">
    <input type="text" name="lorem" id="aliquot" value="abc" />
  </td>
  <td class="description" valign="top">Lorem ipsum dolor sit amet.</td>
  <td class="cis_field_id" valign="top">master_cum_esse_sunc_veniat</td>
  </tr>
</tbody>
</table>

有什么CSS方法可以实现我想要的吗？

Answer 1

如果您添加一个 div 作为 input-cell 的直接子级并指定 min-width: 40vw(请注意我我正在使用 40vw 视口(viewport)宽度单位)，然后在 div 和 textarea 之间添加另一个元素，或者就像我在这里所做的那样，给 textarea min-width: 200px，你的最小宽度要求都满足了。

Fiddle demo

堆栈片段

table {
  width: 100%;
  table-layout: auto;
}

.input-cell {
  width: 40%;
}

.input-cell > div {
  min-width: 40vw;
  border: 1px solid red;
}

textarea,
input {
  width: 95%;
  min-width: 200px;
}

<table>
  <thead>
    <tr valign="top">
      <th scope="row">Setting</th>
      <th scope="row">Value</th>
      <th scope="row">Beschreibung</th>
      <th scope="row">ID</th>
    </tr>
  </thead>
  <tbody>
    <tr valign="top">
      <td valign="top">Post Widget: Output callbacks</td>
      <td valign="top" class="input-cell">
        <div>
          <textarea id="foo" name="bar" rows="7">Lorem ipsum ...</textarea>
        </div>
      </td>
      <td class="description" valign="top">Lorem ipsum dolor sit amet.</td>
      <td class="cis_field_id" valign="top">master_cum_esse_sunc_veniat</td>
    </tr>
    <tr valign="top">
      <td valign="top">Post Widget: Output callbacks</td>
      <td valign="top" class="input-cell">
        <input type="text" name="lorem" id="aliquot" value="abc" />
      </td>
      <td class="description" valign="top">Lorem ipsum dolor sit amet.</td>
      <td class="cis_field_id" valign="top">master_cum_esse_sunc_veniat</td>
    </tr>
  </tbody>
</table>