html - 沿顶部对齐单元格中的标签(valign 和 vertical-align 不起作用)

Question

我在让单元格内的 span 元素与单元格顶部对齐时遇到问题。他们保持在中心对齐。我已经尝试过 valign 以及 vertical-align(在 CSS 中)。

<table class="table">
    <thead>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">
                <span class="label label-default"> Test </span>
                <span class="label label-default"> Test </span>
            </td>
            <td>
                <span class="label label-default"> Test </span>
            </td>
            <td></td>
            <td></td> 
        <tr>
    </tbody>
</table>

编辑:

唯一相关的 CSS 如下:

.label-cal {
    background-color: #5d97ce;
    display:block;
    margin:.3em;
  padding: .3em;
 }

表类是 Bootstrap 的一部分

Answer 1

像魅力一样工作。使用 bootstrap 确保 css 类更加具体。使用 .table td 而不是 td。

.table span {
  display: block;
}
.table td {
  vertical-align: top;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">
    <thead>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">
                <span class="label label-default"> Test </span>
                <span class="label label-default"> Test </span>
            </td>

            <td>
                <span class="label label-default"> Test </span>
            </td>
            <td>
            </td>
            <td>
            </td> 
        <tr>
    </tbody>
</table>