CSS Ввод ширины даты внутри таблицы

Question

У меня возникли некоторые проблемы при работе с <input type='date'> и его процентной шириной внутри таблицы в Chrome.

У меня есть этот HTML:

<table><tr>
    <td><input type='date'/></td>
    <td><input type='text'/></td>
<tr></table>

А это CSS:

table {
  width: 200px;
}
td{
  border: 1px solid black;
}
input {
  width: 100%;
}

это дает такой результат:

Как видите, обе ширины различаются (ввод даты составляет 150 пикселей, а ввод текста - 45 пикселей).

Я попытался изменить ширину ввода даты до 50%:

input[type=date] {
  width: 50%;
}

Результат снова неожиданный:

дата ввода теперь 80px, а <td> - 150px.

Хорошо, давайте попробуем уменьшить <td> ширину, тогда ... Я пробовал 50%, 25% и даже 10% без результатов

td:first-child{
  width: 10%;
}

Я могу установить ширину ввода даты, используя точные пиксели (пример: 50px), но это не то, что я хочу, потому что ширина таблицы может быть шире, поэтому мне нужен способ, чтобы она работала с процентами, как текст ввод работает.

Заранее спасибо!

table {
  width: 200px;
}
td{
  border: 1px solid black;
}
input {
  width: 100%;
}

<table><tr>
  <td><input type='date'/></td>
  <td><input type='text'/></td>
<tr></table>

Answer 1

Попробуйте использовать table-layout:fixed на table

table {
  width: 200px;
  table-layout: fixed;
}

td {
  border: 1px solid black;
  width: 50%;
}

input {
  width: 100%;
}

.wider {
  width: 400px;
}

<table>
  <tr>
    <td><input type='date' /></td>
    <td><input type='text' /></td>
    <tr>
</table>

<table class="wider">
  <tr>
    <td><input type='date' /></td>
    <td><input type='text' /></td>
    <tr>
</table>

Answer 2

Избавьтесь от:

 input {
   width: 100%;
 }

https://jsfiddle.net/8m1s9pu9/