I'm using data table.net in my website. Here I have a table. I want to add an label to status calumn called 'in progress' , 'assigned ' and 'not assigned'. But those labels are not wraping to the label.
How can i do that.? I tried text-wrap. and that is not working. And also inline styles.
I'm using bootstrap 4.
Here is the table
<table class="table table-separate table-head-custom table-checkable" id="linetb">
<thead>
<tr>
<th>Reg ID</th>
<th>Customer Name</th>
<th>Contact No</th>
<th class="p-">Service Type</th>
<th>FTTH Package</th>
<th>FDP</th>
<th>Received Date</th>
<th>Assigned Date</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>112234455</td>
<td>Ms John Fernando</td>
<td>0736252738</td>
<td>CREATE</td>
<td>IP</td>
<td>HC-23S-0-34y473-434233-1</td>
<td>10/15/2017</td>
<td>10/15/2017</td>
<td><span class="label label-lines label-success font-weight-bolder label-pill label-inline mr-2">IN PROGRESS</span></td>
<td nowrap="nowrap"></td>
</tr>
here is the styles
.label.label-inline {
width: auto;
}
.label.label-pill {
border-radius: none;
}
.label.label-inline {
width: auto;
padding: 0.2rem 2rem;
border-radius: 0.42rem;
}
.label.label-hello-sucess {
color: #6d7517;
background-color: #c2d50061;
}
Here this text is not wraped inside the label