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.
Related
I have a table in html and want to apply custom width to each header of table. But unfortunately it's not applying. I have bootstrap4 integrated in my html.
Here is my full html table code
<div class="row">
<div class="col-12">
<table class="table table-bordered">
<thead>
<tr>
<th class="user-profile-th" style="width:10%;">
<label class="container-checkbox"><input class="site-checkbox "
type="checkbox" ><span
class="checkmark-checkbox"></span></label></th>
<th class="user-profile-th brand" style="width:20%;">Brand</th>
<th class="user-profile-th link-code" style="width:40%;">Link/Code</th>
<th class="user-profile-th" style="width:15%;">Clicks</th>
<th class="user-profile-th" id="status" style="width:15%;">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox"
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>ClassPass</td>
<td class="refrl">
www.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pkwww.testing.com.pk
</td>
<td>0</td>
<td>
<div class="tag-cstm rejected"> Rejected </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox"
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>Fave</td>
<td class="refrl">www.yoyo.com</td>
<td>0</td>
<td>
<div class="tag-cstm rejected"> Rejected </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox "
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>artificial inteliggence</td>
<td class="refrl">www.xyxx.com</td>
<td>0</td>
<td>
<div class="tag-cstm approved"> Approved </div>
</td>
</tr>
<tr>
<td><label class="container-checkbox"><input class="site-checkbox "
type="checkbox"><span class="checkmark-checkbox"></span></label></td>
<td>polymorphism</td>
<td class="refrl">www.oopconcepts.com</td>
<td>0</td>
<td>
<div class="tag-cstm pending"> Pending </div>
</td>
</tr>
</tbody>
</table>
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
</div>
Here is my full code jsfiddle link
Why custom widths are not applying?
To give custom width use style="width: 2000px;".
You have not used proper bootstrap classes...
Take a look at https://getbootstrap.com/docs/4.0/content/tables/ .
Check this code:
<table class="table">
<thead class="thead-dark">
<tr>
<th style="width: 2000px;" scope="col">#</th>
<th scope="col">First</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
</tbody>
Check out the image Here
Check out the Live code here: https://codepen.io/manaskhandelwal1/pen/WNvoVeg
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
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>
I am constructing three different table as following.
There is a lot of repetitive code in it.
The only different in each table is studentPermissions[] array which contain three objects for each student. So under each table i am just changing it for each student like studentPermissions[0], studentPermissions[1] and studentPermissions[2].
Is there any further better i can write same code in less no of lines?
<div class="module-container">
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[0].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[0].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[1].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[1].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermissions[2].SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermissions[2].Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
I was not sure about question title so please feel free to update it to make it more relevant with question contents. thanks
Also, I have to show data for each customer in septate table. this is requirement
Why not just use another ng-repeat?
<div class="module-container">
<div ng-repeat="studentPermission in studentPermissions">
<table>
<thead>
<tr >
<td>Student</td>
<td>{{studentPermission.SubjectName}}</td>
</tr>
<tr>
<th></th>
<th ng-repeat="permission in permissions"><div><span>{{permission.Name}}</span></div></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in studentPermission.Students">
<td>{{student.FirstName}} {{student.LastName}} <small class="" style="color: #999999;">({{student.Role}})</small></td>
<td ng-repeat="permission in student.Permissions">
<input ng-model="permission.Checked" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
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>