How can I fix Laravel table going off page

Viewed 181

I have a table which I have created in a laravel blade, I've used bootstrap for this but my table seems to span off the screen, I have never really used laravel and normally my tables have auto centred as needed, I'm hoping someone can make some suggestions or share snippets to help me out :)

I have this image here:

enter image description here

I thought I should also put my blade in but only put the form-group as it will save your guys time :)

<div class="form-group">
    <table id="userTable" data-page-length='5' cellspacing="0"
           class="table table-bordered table-striped table-hover table-condensed"
           role="grid">
        <thead>
            <tr>
                <th scope="col">MESSAGE ID</th>
                <th scope="col">MSISDN</th>
                <th scope="col">MO/MT</th>
                <th scope="col">TYPE</th>
                <th scope="col">SENT/RECEIVED</th>
                <th scope="col">TITLE</th>
                <th scope="col">ORIENTATION</th>
                <th scope="col">DESCRIPTION</th>
                <th scope="col">IMAGE URL</th>
                <th scope="col">ALIGNMENT</th>
                <th scope="col">STATUS</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td style='font-size:14px'>{{$message->id}}</td>
                <td>{{$message->msisdn}}</td>
                <td class="text-center">
                    @if ($message->direction == 'mo')
                        <span class='badge badge-warning'>mo</span>
                    @else
                        <span class='badge badge-success'>{{$message->direction}}</span>
                    @endif

                </td>
                <td>{{$message->type}}</td>
                <td>{{$message->created_at}} </td>
                <td>{{$message->content->richCard->standaloneCard->cardOrientation}}</td>
                <td>{{$message->content->richCard->standaloneCard->cardContent->title}}</td>
                <td>{{$message->content->richCard->standaloneCard->cardContent->description}}</td>
                <td>{{$message->content->richCard->standaloneCard->cardContent->media->contentInfo->fileUrl}}</td>
                <td>{{$message->content->richCard->standaloneCard->thumbnailImageAlignment}}</td>
                <td class="text-center">
                    @if ($message->status == 'NOK')
                        <span class='badge badge-danger'>NOK</span>

                    @elseif ($message->status == 'received')
                        <span class='badge badge-info'>received</span>

                    @elseif ($message->status == 'delivered')
                        <span class='badge badge-primary'>delivered</span>

                    @elseif ($message->status == 'queued')
                        <span class='badge badge-warning'>queued</span>

                    @elseif ($message->status == 'read')
                        <span class='badge badge-success'>read</span>

                    @elseif ($message->status == 'sent')
                        <span class='badge badge-success'>sent</span>

                    @endif
                </td>
            </tr>
        </tbody>
    </table>
</div>

Any help would be greatly appreciated as I've never had this before.

2 Answers

before your table tag use

<div class='table-responsive'>

and close the div after closing your table tag.

This worked for me in some cases.

You will have to use table-responsive

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
Related