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%;
}

它产生了这个结果：

正如您所看到的，两个宽度都不同（日期输入为150px，文本输入为45px）。

我尝试将日期输入宽度更改为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>