表格内的CSS输入日期宽度答案

【问题标题】：CSS Input date width inside table表格内的CSS输入日期宽度
【发布时间】：2018-10-20 20:17:23
【问题描述】：

我在处理 <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%;
}

结果又出乎意料：

日期输入现在是 80 像素，<td> 一直是 150 像素。

好的，让我们尝试减小 <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>

【问题讨论】：

那么问题出在哪里？
...不使用表格布局？
尝试在table 上使用table-layout:fixed。
问：如何使它与百分比一起工作，就像文本输入一样？
Paulie_D，好像行得通！ :o

标签： html css percentage html-input

【解决方案1】：

摆脱：

 input {
   width: 100%;
 }

https://jsfiddle.net/8m1s9pu9/

【讨论】：

谢谢，这样做会使表格宽度为 328px，表格宽度可以改变，所以我需要它们的百分比 :(

【解决方案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>

【讨论】：