CSS - 表格单元格 - 最小宽度 - 百分比和像素: 如何解决这个问题？

Question

有一些类似的问题，但迄今为止我没有找到令人满意的答案。我有一个响应式表格，就像示例中的表格（实际上是WordPress管理员界面）。

HTML 只能被改变到一定程度 -- 我必须使用表格。我想让一个单元格具有像素和百分比的最小宽度。

就像这样:

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

只有第二个属性会起作用，因此这并没有帮助。更糟糕的是，无论我使用 table-layout:fixed 还是 table-layout:auto;，min-width 都无法与表格单元格一起使用。

以下示例演示了具有普通 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的方法可以达到我想要的效果？

- Blackbam

---

这两个 min-width 中哪个更具优先级？ - Asons

另外，当你说 min-width: 40% 时，40% 是指什么？ - Asons

@LGSon，通过min-width:40%，我指的是表格宽度的40%。两个min-width都会生效。可以通过一个带有min-width的span元素来解决min-width像素的问题。问题在于min-width不适用于表格单元格，因此我仍然没有找到min-width百分比的解决方案。 - Blackbam

表格是否始终充满浏览器宽度？ - Asons

您可以在我的回答中评论该表格是否始终是浏览器的全宽，如果不是，如何设置？ - Asons

CSS 2.1和2.2规范指出：'min-width'和'max-width'对于表格、内联表格、表格单元格、表格列和列组的影响是未定义的。 - Simon

Answer 1

如果您将一个 div 作为 input-cell 的直接子元素，并给它设置 min-width: 40vw（请注意我使用的是 40vw 视口宽度单位），然后在 div 和 textarea 之间添加另一个元素，或者像我这样简单地给 textarea 设置 min-width: 200px，那么您的 最小宽度要求 就都得到满足。

Fiddle demo

Stack snippet

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>

- Asons

Answer 2

第二个值正在覆盖第一个值，所以这样行不通。只需使用以下内容：

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

如果40%大于200px，宽度将为40％，否则宽度将为200px。

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

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

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>

- Johannes

---

问题在于min-width不适用于表格单元格。像素的min-width可以通过在输入元素周围放置一个span来解决。然而，40%的宽度并不完全符合我的要求，因为如果有足够的空间，单元格应该扩展到更大的宽度。 - Blackbam

Answer 3

如果您使用两个具有相同名称的属性，则第二个属性将具有更高的优先级。请尝试使用table-layout:fixed;并将width设置为td标签。

- Mr.Pandya

---

但是那并没有解决整个问题，对吧？ - Blackbam

是的。因此问题是，我该怎么做来实现最小宽度行为。 - Blackbam

尝试使用div和它们的样式，包括display:table;和display:table-cell属性。 - Mr.Pandya

@Blackbam 在这里查看 https://jsfiddle.net/u3ybd1t1/。我将 min-width:200px; 分配给 .td1 类。 - Mr.Pandya

@Blackbam 如果没有收到，请告诉我。 - Mr.Pandya