Text shifting elements bootstrap

Question

I have the following table using bootstrap when there is too much text:

It pushes the column down and doesn't even come close to filling the whole area before pushing the size of the row... Plus the text isn't aligned with itself. I tried text-align in css to fix this but found no answers there.

Here is the code for the mess with no additions just generic:

   <div class="container">
            <table class="table">
                <thead>
                    <tr>
                        <th>Event</th>
                        <th>Last Ran</th>
                        <th>Next Run</th>
                        <th>Options</th>
                        <th>Details</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (PIM5.Web.Models.Event evt in Model.Events)
                    {
                        <tr class=@evt.status>
                            <td><b>@evt.name</b></td>
                            <td>@evt.lastRan</td>
                            <td>@evt.nextRun</td>
                            <td style="max-width: 150px">
                                @if (evt.options > 0)
                                {
                                    <button type="button" class="btn btn-success"  onclick="doProcessStart('@evt.name')">Start</button>
                                    <button type="button" class="btn btn-warning"  onclick="doProcessStop('@evt.name')">Stop</button>
                                    <button type="button" class="btn btn-info" onclick="doProcessEdit('@evt.name')">Edit</button>
                                }

                                @if (evt.options > 1)
                                {
                                    <button type="button" class="btn btn-success">Force</button>
                                }
                                <button type="button" class="btn btn-danger" onclick="doProcessRemove('@evt.name')">Remove</button>
                            </td>
                            <td>@evt.description</td>
                        </tr>
                    }
                </tbody>
            </table>
            <button class="btn btn-success" onclick="doAddEvent()">New Event</button>
        </div>

This is what I would like it to do:

Fill the black box area first before pushing row down and never increase the row width and go off screen

Willing to use javascript or anything that will fix this problem.

fixed width is no good for mobile devices - use % widths - in this case though use bootstrap columns as already using bootstrap — StudioTime, Jan 26 '16 at 14:27

score 1 · Answer 1 · answered Jan 26 '16 at 14:15

Here is the css you could use - similar idea unpollo had:

.evtstatus td:last-child {
    max-width: 200px;
    word-wrap: break-word;
}

For it to work you need to apply the class "eventstatus" to the tr.
I also use max-width in case there is less text.

score 1 · Accepted Answer · edited May 23 '17 at 12:15

You can also use the built in bootstrap styles col-md-*. This was answered in this question: Bootstrap - how to set up fixed width for <td>?

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.
<tr class="something">  
    <td class="col-md-2">A</td>  
    <td class="col-md-3">B</td>  
    <td class="col-md-6">C</td>  
    <td class="col-md-1">D</td> </tr>  
For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.
<tr class="something">  
    <td class="span2">A</td>  
    <td class="span3">B</td>  
    <td class="span6">C</td>  
    <td class="span1">D</td> </tr>  
** If you have <th> elements set the width there and not on the <td> elements.

Adding `word-wrap: break-word;` to the style of the td should fix it — rambii, Jan 26 '16 at 14:27

score 0 · Answer 3 · answered Jan 26 '16 at 14:13

0

Give your THs widths, that will limit the width of the corresponding TDs. You can also play with word-break to make sure long words wrap properly (https://css-tricks.com/almanac/properties/w/whitespace/)

answered Jan 26 '16 at 14:13

unpollo

806
5
15

Text shifting elements bootstrap

3 Answers3