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
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 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>
I am trying to prepare a simple mark sheet [as an example to demonstrate my requirement]. Am planning to have a collapsible div which will render all the mark details once it is expanded.
<div class="well">
<table class="table table-bordered"
style="background:#fff; margin-bottom:10px;">
<tbody>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>1</td>
<td>ABC</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_1"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_1">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Physics </td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr class="inverse">
<th> ID</th>
<th colspan="2"> Name</th>
</tr>
<tr>
<td>2</td>
<td>PQR</td>
<td>
<a class="btn btn-primary" data-toggle="collapse" href="#ID_2"
aria-expanded="false" >
Hide/Unhide
</a>
</td>
</tr>
<tr>
<td colspan="3">
<div class="collapse" id="ID_2">
<div class="well">
<table class="table table-hover table-bordered" style="background:#fff; margin-bottom:10px;">
<thead>
<tr class="inverse">
<th>Subject</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td>Chemistry</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
fiddle
But in this approach, when a section is not expanded, the row which encloses the collapsible div appears like a blank row in the table - which is quite misleading.
I am sure this is not the best way to render this sort of details.Would like to know what are the alternate UI options to render these details.
Use this CSS:
td[colspan="3"] {
padding: 0;
}
Fiddle