水平对齐不同 td 中的输入

Question

我正在尝试对齐 2 个不同td标签中的 2 个输入以水平对齐。 此外，当input被附加到td时，它将覆盖td文本

有2种情况：

• 当td都有文本或为空时，一切正常。
• 当 2 个td之一有文本时，它们不会在同一行对齐

这是我尝试过的源代码： https://jsfiddle.net/oc8Lgm3y/2/

Answer 1

您可以添加vertical-align:bottom; 到td,th 。

你可以在这里查看源代码： https://jsfiddle.net/k1gapfmq/

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  vertical-align: bottom;
  padding: 8px;
}

input[name=^='product'] {
  background-color: red;
}