Input width in table

by Bair

HTML

<p>Input takes all width?</p>
<table>
  <tbody>
    <tr>
      <td width="163px">
        <div>
          <input type="text" name="some-field" />
          <button class="symbol" type="button"></button>
          <button class="symbol" type="button"></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<p>No Width</p>
<table>
  <tbody>
    <tr>
      <td>
        <div>
          <input type="text" name="some-field" />
          <button class="symbol" type="button"></button>
          <button class="symbol" type="button"></button>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS

button.symbol {
  border-width: 0;
  background: white;
  display: inline;
}
button.symbol::before {
  content: '\0394';
}
input {
  display: inline;
}