仅使用 css/scss 使 td 元素与输入元素的宽度相同？

Question

我之前曾尝试问过这个问题，但没有成功，所以我会尝试再问一次。我真的希望有人能提供帮助。

我要的是：

table 拉伸到 100%
"fill" table 的第一个输入元素，因为 table 必须是 100%
其他输入元素大小不同
td 与输入元素的宽度相同（否 space）
只需更改 css 即可实现此目的（无 js，无 html 更改）

在下面的代码片段中，您可以看到我的 html table。我不想以任何方式更改它，也不想添加任何类。我也不想使用任何 javascript。

如果你运行代码片段你可以看到我的问题。 td 比输入元素宽得多。我希望第二个、第三个和第四个 td 到 "shrink" 到输入元素的大小。我希望第一个 td 伸出（因为 table 必须是 100%）。

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #000;
}

.small {
  width: 20px;
}

.medium {
  width: 40px;
}

<table>
<tbody>
  <td>
    <div>
      <input type="text" /> 
    </div>
  </td>
  <td>
    <div>
      <input class="small" type="text" /> 
    </div>
  </td>
  <td>
    <div>
      <input class="medium" type="text" /> 
    </div>
  </td>
  <td>
    <div>
      <input class="medium" type="text" /> 
    </div>
  </td>
</tbody>
</table>

我知道这可以通过在 td 元素而不是输入上设置宽度来解决，但这不是我想要的。我也知道可以通过将 table 的宽度设置为 auto 来解决，但这也不是我想要的。我只希望 td 元素与仅使用 css 的输入元素的宽度相同。

Answer 1

这是你想要达到的目标吗？我将第一个 td 和 input 设置为具有 width: 100%; 所以它们将填充 table 的其余部分，因为所有其余的 div 都是其中元素的宽度（由您的 class).使用 box-sizing: border-box 您可以设置它，以便边框等对元素的宽度没有影响。您还可以将 box-sizing 属性仅设置为 table 及其所有带有 table * { box-sizing: border-box; } 的元素。

* {
  box-sizing: border-box;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  border: 1px solid #000;
}
table td:first-child,
table td:first-child input {
  width: 100%;
}
.small {
  width: 20px;
}
.medium {
  width: 40px;
}

<table>
  <tbody>
    <td>
      <div>
        <input type="text" />
      </div>
    </td>
    <td>
      <div>
        <input class="small" type="text" />
      </div>
    </td>
    <td>
      <div>
        <input class="medium" type="text" />
      </div>
    </td>
    <td>
      <div>
        <input class="medium" type="text" />
      </div>
    </td>
  </tbody>
</table>

仅使用 css/scss 使 td 元素与输入元素的宽度相同？

Make td element same width as input element with only using css/scss?

html

css

css-tables