使用 CSS，将填充应用于所有 td 元素，但具有输入或选定子元素的元素除外

Question

标题说明了一切：

仅使用 CSS，如何将一些填充应用于所有 td 元素，除了那些具有 input 或 select 类型的子元素的元素，我希望有另一个填充？

请注意，我想要尽可能通用的解决方案（例如，没有硬编码的内联样式），所以想到的第一件事就是尝试这样做： td:not(:has(input, select))，但这是不可能的。

例如，在下表中（这里也是一个小提琴），我希望所有 td 元素都具有padding-left和padding-right 20px，但那些具有输入或选择元素的元素具有填充2px：

table {
  width: 100%;
  border-collapse: collapse;
}
td {
    text-align: center; 
    vertical-align: middle;
    white-space: nowrap; 
    border: 1px solid #ddd;
    font-size: 16px;
    font-family: arial;
    padding-right: 20px;
    padding-left: 20px;
}
input, select {
  text-align: center; 
  vertical-align: middle;
  font-size: 16px;
}
.fit {
    white-space: nowrap;
    width: 1%;   
}

<table id="myTable" class="fit">
  <tr>
    <td>some</td>
    <td>nice</td> 
    <td>text</td>
  </tr>
  <tr>
    <td>
      <input value="some"/>
    </td>
    <td>nice</td> 
    <td>
      <select>
        <option>option</option>
      </select></td>
  </tr>
</table>

Answer 1

您可以将负margin应用于input和select。

总共减去36px，让您2px每边

table {
  width: 100%;
  border-collapse: collapse;
}
td {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid #ddd;
  font-size: 16px;
  font-family: arial;
  padding-right: 20px;
  padding-left: 20px;
}
input,
select {
  text-align: center;
  vertical-align: middle;
  font-size: 16px;
  margin-left: -18px;
  margin-right: -18px;
}
.fit {
  white-space: nowrap;
  width: 1%;
}

<table id="myTable" class="fit">
  <tr>
    <td>some</td>
    <td>nice</td>
    <td>text</td>
  </tr>
  <tr>
    <td>
      <input value="some" />
    </td>
    <td>nice</td>
    <td>
      <select>
        <option>option</option>
      </select></td>
  </tr>
</table>