4

Say I have a table with a label in it

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

and the css for the label is

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

With display:block, the label fills the whole cell. How can I chose to have it fill only the first half or second half (horizontally)? I tried defining divs with width=50% within the column, but that didn't work.

2
  • Try display inline-block and width 50%. Commented Dec 18, 2015 at 17:01
  • 1
    can you reproduce the issue in a fiddle?
    – andi
    Commented Dec 18, 2015 at 17:07

2 Answers 2

1

You need to ensure that the label has a display:block, because some css rule is overriding your css. I've added a !important and it fixed the problem.

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

1
  • This works for the first part (having it half width), but doesn't let me choose whether to display it as either the first or second half of a column (horizontally). Any ideas for that?
    – Craig
    Commented Dec 18, 2015 at 17:46
1

Please check this out put. its work with width:50% but you need to add width to the table

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.