CSS - table cell - min-width - percentage and pixels: How to solve this?

Question

There are some similar questions however I did not find any satisfying answer so far. I have a responsive table like in the examples (WordPress admin actually).

The HTML can only be changed to a certain degree - I have to use tables. I want a cell to have a minimum width in pixels and a minimum width in percent.

Like this:

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

Only the second property will take action therefore this does not help. To make things even worse min-width does not work with table cells no matter weather I use table-layout:fixed or table-layout:auto;.

The following example demonstrates the table with a normal width style.

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>

Is there any CSS way how to achieve what I want?

Answer 1

If you add a div as an immediate child of the input-cell and give that min-width: 40vw (do note I'm using 40vw viewport width units), and then either add another element between the div and the textarea, or simply as I did here, give the textarea a min-width: 200px, both your minimum width's requirements are fulfilled.

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>