Datatable.net Label resize

Viewed 20

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

Image one

1 Answers

Have you tried:

white-space: nowrap

For example

.nowrap
{
   white-space: nowrap;
}

<td>
<span class="nowrap label label-lines label-success font-weight-bolder label-pill label-inline mr-2">
IN PROGRESS
</span></td>
Related