Using CSS, apply padding to all td elements, except those with input or select children

Question

The title says it all:

Using only CSS, How can I apply some padding to all td elements, except those with children elements of input or select types, which I'd like to have another padding for?

Note that I'd like as generic solution as possible (e.g., no hardcoded inline style), so the first thing that came in mind was to try and do this: td:not(:has(input, select)), but it's not possible.

For example, in the following table (here's also a fiddle), I'd like all td elements to have padding-left and padding-right of 20px, but those with input or select elements to be with padding of 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>

You would need to add a class to the cell - there is no parent selector or selector to say contains an input. Surely at the point you are creating the table, you know if the cell has an input or not and therefore can add a class to it? — Pete, Nov 08 '17 at 14:16

score 0 · Accepted Answer · answered Nov 08 '17 at 14:14

You could apply a negative margin to input and select.

Subtract a total of 36px to give you 2px each side

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>

Using CSS, apply padding to all td elements, except those with input or select children

1 Answers1