将元素与 HTML 表格单元格的底部对齐

Posted 2023-03-05

【中文标题】将元素与 HTML 表格单元格的底部对齐

【英文标题】：Align element to bottom of HTML Table Cell

【发布时间】：2017-07-23 13:48:10

【问题描述】：

我在 html 表格的一个单元格中有多个元素。我希望一些元素与单元格的底部对齐，而一些元素在顶部对齐。我无法让元素与底部对齐。我的桌子是：

    <tr>
        <td style="background-color: #007CE2">
            <p id="t1_list">test<br>another<br>testing</p>
            <input type="text" name="t1_input" id="t1_input">
            <button>
                Add
            </button>
        </td>
        <td style="background-color: #E54040">
            <p id="t2_list"></p>
            <div class="value_input2">
                <input type="text" name="t2_input" id="t2_input">
                <button>
                    Add
                </button>
            </div>
        </td>
    </tr>

但是 div 中的元素似乎希望保持在单元格的中心，而不是保持在底部。到目前为止，我已经用 CSS 尝试了两种不同的方法：

div.value_input 
    position: absolute;
    bottom: 0;

这只是将 div 带到页面底部。并且：

div.value_input2 
    display: table-cell;
    vertical-align: bottom;

没有效果。

我在JSFiddle有代码

我需要做什么才能让输入框和按钮与单元格底部对齐？

【参考方案1】：

您需要将父元素位置设置为相对position:relative 才能使用绝对定位。这是一个有效的 sn-p。

table 
    		border-collapse: collapse;
		

		table, th, td 
		    border: 2px solid black;
        position:relative;
		

		div.value_input 
			position: absolute;
      bottom: 0;
		
    
    div.value_input2 
      position:absolute;
      bottom:0;
    

<table>
		<tr>
			<th style="background-color: #007CE2">
				Test
			</th>
			<th style="background-color: #E54040">
				Test
			</th>
		</tr>
		<tr>
			<td style="background-color: #007CE2">
				<p id="t1_list">test<br>another<br>testing</p>
				<input type="text" name="t1_input" id="t1_input">
				<button>
					Add
				</button>
			</td>
			<td style="background-color: #E54040">
				<p id="t2_list"></p>
				<div class="value_input2">
					<input type="text" name="t2_input" id="t2_input">
					<button>
						Add
					</button>
				</div>
			</td>
		</tr>

		<tr>
			<th style="background-color: #8BC34A">
				Test
			</th>
			<th style="background-color: #FF9800">
				Test
			</th>
		</tr>
		<tr>
			<td style="background-color: #8BC34A">
				<p id="t3_list"></p>
				<input type="text" name="t3_input" id="t3_input">
				<button>
					Add
				</button>
			</td>
			<td style="background-color: #FF9800">
				<p id="t4_list"></p>
				<input type="text" name="t4_input" id="t4_input">
				<button>
					Add
				</button>
			</td>
		</tr>
	</table>

【参考方案2】：

您需要height:somepx 才能在其中进行垂直对齐。

【参考方案3】：

使表格单元格位置：相对，然后你可以在div上再次尝试位置：绝对...

table tr td 
  position: relative;


div.value_input2 
  position: absolute;
  bottom: 0;

fiddle