CSS 在里面输入日期宽度 table

Question

我在使用 <input type='date'> 和他在 chrome 中的 table 内的百分比宽度时遇到了一些问题。

我有这个 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 宽度可以变宽，所以，我需要一种方法让它工作百分比，就像文本输入一样。

提前致谢！

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

摆脱：

 input {
   width: 100%;
 }

https://jsfiddle.net/8m1s9pu9/

Answer 2

尝试在 table

上使用 table-layout:fixed

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>

CSS 在里面输入日期宽度 table

CSS Input date width inside table

html

css

html-input

percentage