水平對齊不同 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;
}