Reputation: 3311
I have trouble with input bootstrap form-control in a table column. I dont want it to be cascading ontop of each other but i want it stacked horizontally like how tables rows should be.
Here is the problem code:
<td colspan="4">
a:
<input class="form-control" id="a" type="text" value="a" />
b:
<input class="form-control" id="a" type="text" value="a" />
</td>
And here is the example to see the problem.
Upvotes: 0
Views: 594
Reputation: 9488
You have a few issues in your code, you should wrap inputs in the form-group
class, also form-control
automatically takes 100% width. Furthermore, it sounds like you want to be using a form-inline
.
Try this:
HTML:
First change: add form-inline
class
<table id="paymenttable" class="table table-condensed form-inline">
Second change: add form-group
and change width of form-control
<td colspan="4">
<div class="form-group">
a:
<input class="form-control table-input" id="a" type="text" value="a" />
b:
<input class="form-control table-input" id="a" type="text" value="a" />
</div>
</td>
Add to your CSS:
.table-input {
width:40%;
}
Upvotes: 1