CSS Input date width inside table

Question

I am having some issues working with <input type='date'> and his percentage width inside a table in chrome.

I have this HTML:

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

And this CSS:

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

it makes this result:

As you can see both widths are different (date input is 150px and text input is 45px).

I tried changing date input width to 50%:

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

The result again is unexpected:

date input is now 80px and <td> keeps being 150px.

Ok, lets try reducing <td> width then... I tried 50%, 25% and even 10% with no results

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

I can set the date input width using exact pixels (example: 50px), but, is not what I want, because table width can go wider, So, I need a way to make it work with percentage, just like text input works.

Thank you in advance!

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

Try usng table-layout:fixed on the 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>