input увеличивает td блок, как можно это исправить?

Question

Если вместо input будет текст, то td будем нормального размера т.е как у остальных, но если добавить input, то он увеличивает td в этой колонке. Подскажите как можно решить проблему? Т.е чтобы input не увеличивал td блок.

table {
  width: 900px; 
  margin: 0 auto;
  border-collapse: collapse;
}
table td {
  padding: 12px 16px;
  border-right: 1px solid #e8e9eb;
  text-align: center;
}
table thead tr {
  font-weight: bold; border-top: 1px solid #e8e9eb;
}
table tr {
  border: 1px solid #e8e9eb;
}
table tbody tr:hover {
  background: #e8f6ff;
}

.input {
  width: 100%;
  box-sizing: border-box;
}

<table>
  <thead>
    <tr>
      <td>Наименование</td>
      <td>Описание</td>
      <td>Цена</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="input">
      </td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
    <tr>
      <td>Имя #2</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
    <tr>
      <td>Имя #3</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
  </tbody>
</table>

Answer 1

Для .input прописать:

width: auto;

А также для table желательно указать:

max-width: 900px;

table {
  max-width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
}

table td {
  padding: 12px 16px;
  border-right: 1px solid #e8e9eb;
  text-align: center;
}

table thead tr {
  font-weight: bold;
  border-top: 1px solid #e8e9eb;
}

table tr {
  border: 1px solid #e8e9eb;
}

table tbody tr:hover {
  background: #e8f6ff;
}

.input {
  width: auto;
  box-sizing: border-box;
}

<table>
  <thead>
    <tr>
      <td>Наименование</td>
      <td>Описание</td>
      <td>Цена</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" class="input">
      </td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
    <tr>
      <td>Имя #2</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
    <tr>
      <td>Имя #3</td>
      <td>Характеристики</td>
      <td>Стоимость</td>
    </tr>
  </tbody>
</table>

Answer 2

Sevastopol' помог мне спасибо. Я так же нашел пару вариантов решения. Может кому пригодится.
1)

table {
 max-width: 900px;
 width: 100%;
 table-layout: fixed;
}
.input {
 width: 100%;
 box-sizing: border-box;
}

Минус в том что все колонки будут одинакового размера.
2)

td {
 position: relative;
}

.input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
}

Это решение отлично подходит, но мне пришлось добавить доп.свойства для центрирования input, но можно обойтись и задать width: 100%; height: 100%; top: 0; left: 0, тогда input займет все пространство td

БЛОГ НА HUSL

input увеличивает td блок, как можно это исправить?

Ответы (2 шт):