Evan Root Evan Root - 5 months ago 12
CSS Question

Not able to change the width of a bootstrap table

I have a bootstrap table which is something like this



<table class="table table-bordered table-striped table-highlight">
<tbody>
<tr>
<td align="center" style="width:30%"><input type="text"
class="form-control" id="tag" name="tag"
placeholder="Enter Tag For The Change" maxlength='140'
> <input type="hidden"
class="form-control" id="userEmail" name="userEmail"
placeholder="Enter Tag For a Change" maxlength='140'></td>
</tr>
</tbody>
</table>





Despite setting the width of the column to 30% the table still expands across the entire screen
I also have this CSS set for the table



table {
table-layout: fixed;
word-wrap: break-word;
}





Is there another way to do this ?

Answer

If you want your table to be smaller and not take up the entire screen, then you have your inline style in the wrong place.

Instead of setting the width for the <td>, set the width for the <table>.

This should solve your problem:

HTML:

<table class="table table-bordered table-striped table-highlight" style="width: 30%">
    <tbody>
        <tr>
            <td align="center">
                <input type="text" class="form-control" id="tag" name="tag" placeholder="Enter Tag For The Change" maxlength='140' /> 
                <input type="hidden" class="form-control" id="userEmail" name="userEmail" placeholder="Enter Tag For a Change" maxlength='140'/>
            </td>
        </tr>
    </tbody>
</table>

CSS:

table {
    table-layout: fixed;
    word-wrap: break-word;
}

Here is a Bootply of this in action.