将span与th的顶部对齐，并将input与th的底部对齐

Question

我正在使用一个库，生成表的头像这样

<th>
<span class="xxx">header title</span>
<span class="sort_icon"/>
<input text (optional, depending on column definition for filtering) class="yyy">
</th>

我想做的是使用纯css使标题和排序图标对齐到元素的顶部，输入元素如果出现在元素的底部。

我的问题是，垂直对齐只能设置为元素，从而使跨度和输入到顶部或底部，但我不能找出一种方法来对齐不同的跨度和输入

Answer 1

通常在这种情况下使用绝对定位更容易:

<style type="text/css">
.th
{
position:relative;
}
.xxx
{
position:absolute;
top:0px;
left:0px;
}

.yyy
{
position:absolute;
bottom:0px;
left:0px;
}
</style>

唯一的缺点是你必须确保th的高度足以容纳排序图标。这很简单-只需设置高度和任何必要的边距/内边距，或th。

Answer 2

固定的位置是一个选项，但它将很难保持底部的输入框，因为你不知道有多少内容将在标题。可以是2行，也可以是1行。

你可以尝试下面的例子。span标签不是块元素，所以不能轻易移动。因此，请使用display:block，然后处理边距和内边距。

p。:最好使用CSS文件…内联样式只是例如

<table>
<tbody><tr>
<th style="
    max-height: 100px;
    background-color: red;
    vertical-align: top;
">
<span class="xxx" style="
    display: block;
">header title</span>
<span class="sort_icon" style="
    display: block;
    margin-top: 200;
">
<input text="" (optional,="" depending="" on="" column="" definition="" for="" filtering)="" class="yyy">
</span></th>
</tr>
</tbody></table>