I'd like to specify a width for the whole column based on TH.
As you can see:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th style="width: 50px">TEST 50</th>
<th style="width: 100px">TEST 100</th>
<th style="width: 150px">TEST 150</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class"form-control" typ="text"></td>
<td><input class"form-control" typ="text"></td>
<td><input class"form-control" typ="text"></td>
</tr>
</tbody>
</table>
https://jsfiddle.net/aq9Laaew/148760/
It always gets 100%.
How could I have a table with 3 columns with 50px, 100px and 150px width.3.
I use bootstrap4.
Bootstrap 4 tables are always width:100%. You can use the w-auto util class on the table to make it width:auto;
Make sure the HTML is properly structured.
<table class="table table-hover table-bordered w-auto">
<thead>
<tr>
<th style="width:50px">TEST 50</th>
<th style="width:100px">TEST 100</th>
<th style="width:150px">TEST 150</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control" type="text"></td>
<td><input class="form-control" type="text"></td>
<td><input class="form-control" type="text"></td>
</tr>
</tbody>
</table>
Demo: https://www.codeply.com/go/ONEQJYeJPN
Related: bootstrap 4 table column sizing
Related
I have a table html with alternate input and checkbox.
My problems is when I want to browse my table with key tab.
When the focus is on checkbox the next tab is not the next cells but the next checkbox.
This is my code:
<form class="tabledit-form">
<table id="table" class=" table-striped">
<thead>
<tr>
<th class="head-num"><div><span>N°</span></div></th>
<th class="head-ba"><div><span>Ba</span></div></th>
<th class="head-num2"><div><span>N2°</span></div></th>
<th class="head-ba2"><div><span>Ba2</span></div></th>
<th class="head-num3"><div><span>N3°</span></div></th>
<th class="head-ba3"><div><span>Ba3</span></div></th>
</tr>
</thead>
<tbody>
{% for i in nb_lines %}
<tr class="line-{{forloop.counter}}">
<td id="lg-{{forloop.counter}}-col-1" tabindex="1"></td>
<td id="lg-{{forloop.counter}}-col-2" tabindex="2"><input type="checkbox" name="ba-1-lg-{{forloop.counter}}" /></td>
<td id="lg-{{forloop.counter}}-col-3" tabindex="3"></td>
<td id="lg-{{forloop.counter}}-col-4" tabindex="4"><input type="checkbox" name="ba-2-lg-{{forloop.counter}}" /></td>
<td id="lg-{{forloop.counter}}-col-5" tabindex="5"></td>
<td id="lg-{{forloop.counter}}-col-6" tabindex="6"><input type="checkbox" name="ba-3-lg-{{forloop.counter}}" /></td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
First of all try not to use tabindex>0 it is not recommended.
Read this for a better understading of tabindex
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
See this example i have made:
<table>
<thead>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th>Cell 4</th>
<th>Cell 5</th>
</tr>
</thead>
<tbody>
<tr>
<td tabindex="0"><input type="checkbox"/></td>
<td tabindex="0">Col</td>
<td tabindex="0"><input type="checkbox"/></td>
<td tabindex="0">Col</td>
<td tabindex="0"><input type="checkbox"/></td>
</tr>
</tbody>
</table>
I am trying to make a table with checkboxes on every row of the table.
I got an example(Code Example link), but I am not being able to get it done. I do not want to use the "data-url" as a source of the table. Except that, everything is accordingly with what I need.
I want to feed the "tbody" by myself.
Here is the example I am following: Code Example
What I want to accomplish:
<tbody>
<tr>
<!-- I do not know what to put over here in order to get it working-->
<td data-field="state" data-checkbox="true"></th>
<td>Foo</td>
<td>666</td>
<td>6969</td>
<td>Let there be rock</td>
</tr>
</tbody>
<!-- UPDATING CODE! -->
<table data-toggle="table" data-click-to-select="true" class="table">
<thead>
<tr>
<th class="bs-checkbox " data-field="state">
<div class="th-inner">
<input name="btSelectAll" class="selectall" type="checkbox">
</div>
<div class="fht-cell"></div>
</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">526</td> <td style="">122</td>
<td style="">Huehuehue</td>
</tr>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">528</td> <td style="">122</td>
<td style="">huehuheheuhe</td>
</tr>
</tbody>
</table>
UPDATE NOTES
Now I can feed the "tbody" by myself (thanks to #Adriano Silva), but the "select all" checkbox is not working.
DONE
Example of the solution given by #AdrianoSilva:
JSFiddle Example
You can insert a row as example below
<table data-toggle="table" data-click-to-select="true" data-url="none">
<thead>
<tr>
<th class="bs-checkbox " data-field="state">
<div class="th-inner">
<input name="btSelectAll" type="checkbox">
</div>
<div class="fht-cell"></div>
</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">526</td> <td style="">122</td>
<td style="">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)</td>
</tr>
</tbody>
</table>
Here is my UI
Here is my code
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Filler1</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageType</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageLength</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
</tbody>
</table>
</div>
How do I adjust the to make it smaller like following?
thank you
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-sm-1">Filler1</th>
<td class="col-sm-11">
<input id="123" type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageType</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageLength</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
</tbody>
</table>
Just put in the Bootstrap Grid class so that <th> and <td> element would not be too wide.
See https://www.bootply.com/BLINHddRZV for output.
Edit: Did not see it is using bootstrap4. Please check this issue and the reply from mdo. Apparently, the grid class is no longer supported for table.
I have one HTML table which I have kept in bootstrap's accordion, I am taking the input from user, whenever input is too long table is getting outside accordion. How can I set width the fixed, and let it expand vertically.
<table id="recordTable" class="table table-bordered table-striped">
<thead>
<tr>
<th class="col-md-1">Question Number</th>
<th class="col-md-6">Question Text</th>
<th class="col-md-3">upload Document(if any)</th>
<th class="col-md-1">Document uploaded?</th>
<th class="col-md-1">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ques_id col-md-1">12 </td>
<td class="ques_text col-md-6">asd</td>
<td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
<td class="col-md-1">delete</td>
</tr>
<tr>
<td class="ques_id col-md-1">14 </td>
<td class="ques_text col-md-6">asd</td>
<td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
<td class="col-md-1">delete</td>
</tr><tr><td class="ques_id">15</td><td class="ques_text">sdfdfgdfgaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td><td class="fileuploadSuccess"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td><td>delete</td></tr>
</tbody>
</table>
Here is screenshot of the image.
jsfiddle link: https://jsfiddle.net/govi20/obnpjt7h/
add this property word-break: break-all; to td tag
another way add class to table outer element table-responsive
<div class="table-responsive">
<table class="table table-bordered table-striped">
...
</table>
</div>
https://jsfiddle.net/obnpjt7h/1/
Ok I was trying to do a table with input fields. To set the sizes of each field I understood that I had to set the col-size in the header.
<thead>
<tr>
<th class="col-sm-2">Large</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-1">Small</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-1">Small</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-2">Large</th>
</tr>
</thead>
However the inputs expand to their max width with no regard to col-size.
http://jsfiddle.net/m79HR/
Possibly this is an improper use of Bootstrap but I saw it as a best bet for inline inputs with headers above.
Also, lets say I want this particular grid to have 18 columns instead of the default 12 is that possible here just in this particular case?
Just add the "form-control" class to the inputs and bootstrap takes care of the rest.
Doing it this way makes it easier to add columns or change the width, since you only have to change in the header as opposed to every row/input.
<table class="table table-condensed">
<thead>
<tr>
<th class="col-sm-12 col-md-4">Large</th>
<th class="col-sm-12 col-md-2">Small</th>
<th class="col-sm-12 col-md-2">Small</th>
<th class="col-sm-12 col-md-2">Small</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
</tr>
</tbody>
</table>
You need to use the class col-md-* for normal screens col-sm-* for tablet screen and col-xs-* for mobile screen, there is also col-lg-* for larger screens, you can combine all these classes to make it responsive, like:
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<thead>
<tr>
<th>Very Small</th>
<th>Very Small</th>
<th>Very Small</th>
<th>Large</th>
<th>Small</th>
<th>Medium</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-4">
<input class="col-sm-12" placeholder="col-sm-4" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" placeholder="col-sm-2" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" placeholder="col-sm-3" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
For Bootstrap 4, you need to additionally add the d-flex class to the rows, like
<table>
<thead>
<tr class="d-flex">
<th class="col-3">3 columns wide header</th>
<th class="col-sm-5">5 columns wide header</th>
<th class="col-sm-4">4 columns wide header</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-3">3 columns wide content</th>
<td class="col-sm-5">5 columns wide content</th>
<td class="col-sm-4">4 columns wide content</th>
</tr>
</tbody>
</table>