Html 引导标签显示：block--仅填充表格单元格的一半？

假设我有一张有标签的桌子

<table class="table rep-cal-table">
    <thead>
        <tr>
            <th>Monday</th>
        </tr>
    </thead>
    <tbody>
        <td>    
            <span class="label label-default label-cal"> Test </span>
        </td>
    </tbody>
</table>

---

使用display:block，标签将填充整个单元格。我如何选择只填充上半部分或下半部分（水平）？我尝试在列中定义宽度为50%的div，但没有成功。

您需要确保标签具有

显示：块

，因为某些css规则正在覆盖您的css。我添加了一个

！重要信息

，它解决了问题

.label-cal{
显示：块；
边缘：.3em；
填充：.3em；
宽度：50%；
}
跨度{
显示：块！重要；
}
div{
位置：相对位置；
显示：块；
宽度：100%；
}

星期一
试验

请检查这个。它的工作宽度：50%，但你需要增加宽度表

<table class="table rep-cal-table">
<thead>
    <tr>
        <th>Monday</th>
    </tr>
</thead>
<tbody>
    <td>    
        <span class="label label-default label-cal"> Test </span>
    </td>
</tbody>

---

尝试显示内联块和宽度50%。你能用小提琴再现问题吗？这适用于第一部分（宽度为一半），但不允许我选择是否显示为列的前半部分或后半部分（水平）。有什么想法吗？

<table class="table rep-cal-table">
<thead>
    <tr>
        <th>Monday</th>
    </tr>
</thead>
<tbody>
    <td>    
        <span class="label label-default label-cal"> Test </span>
    </td>
</tbody>

.label-cal {  width:50%;
display:block;margin:.3em;  padding: .3em;border:1px #f00 solid;}table{border:1px #f00 solid; width:400px;}