将单元格中的标签沿顶部对齐（valign和vertical-align not working）

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>