使用CSS，对所有td元素应用填充，除了那些带有输入或选择子元素的元素

Question

标题说明了一切：

仅使用CSS，我如何对所有td元素应用一些填充，除了那些具有input或select类型的子元素的元素，我想要另外填充？

请注意，我希望尽可能使用通用解决方案（例如，没有硬编码的内联样式），因此首先想到的是尝试执行此操作： td:not(:has(input, select))，但这是不可能的。

例如，在下表中（here's也是一个小提琴），我希望所有td元素都有padding-left的{​​{1}}和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%;   
}

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>