html – Bootstrap标签显示：block – 只填充表格单元格的一半？

2023年11月13日 364次阅读

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

<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>

和标签的CSS是

.label-cal {
    display:block;
    margin:.3em;
  padding: .3em;
}

使用display：block,标签填充整个单元格.我如何选择只填充前半部分或后半部分(水平)？我尝试在列中定义宽度= 50％的div,但这不起作用.

最佳答案 您需要确保标签有display：block,因为某些css规则会覆盖您的css.我添加了一个！important,它解决了这个问题.

.label-cal {
    display:block;
    margin:.3em;
    padding: .3em;
    width:50%;
}
span{
   display:block!important;
}

div{
  position:relative;
  display:block;
  width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="root">
  <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>
</div>
点赞