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
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 have a table in angular 6. This is working find, But I want to use it in ngfor and it not working as expected. Here is the table:
.hiddenRow {
padding: 0 !important;
}
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle" style="cursor: pointer;">
<td>1</td>
<td>05 May 2013</td>
<td>Credit Account</td>
<td class="text-success">$150.00</td>
</tr>
<tr>
<td colspan="12" class="hiddenRow">
<div class="accordian-body collapse jumbotron" id="demo1">
Demo1
</div>
</td>
</tr>
</tbody>
</table>
This is working find except that I want to include *ngFor in order to loop on many elements. Any idea ?
Put this instead of the table row you want to repeat for each row
<tr *ngFor="for row of rows">
<td> {{row.id}} </td>
<td> {{row.date}} </td>
<td> {{row.desc}} </td>
<td> {{row.credit}} </td>
</tr>
(this code is not tested)
Update
Try this:
<table class="table table-condensed" *ngFor="let l of list_name" style="border-collapse:collapse;">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Description<th>
<th>Credit</th>
</tr>
</thead>
...
You can iterate over an array with your desired length
Why bootstrap responsive table is not working with dir-paginate.
I have created a responsive grid HTML table by using bootstrap which is working with hard-coded data, but when my angular developer colleague used some 'dir-paginate' for retrieving data from the database then my responsive design code is not working when minimizing the browser shorter.
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<tr>
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I think you are using the directive at the wrong Position. You want to repeat the <tr>-element instead of the <tbody>-element.
For more Information look at this answer: https://stackoverflow.com/a/34392061/7225524
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
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/
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>