I using this with bootstrap. Tables display fine but theres something wrong with the width of the thead and tbody rows, you can see they have a smaller width than the entire column.
IF you click the panel head you'll see the line temporarily being the correct size. How do I fix this.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading" data-toggle="collapse" href="#collapse1">Shop 1</div>
<!-- Table -->
<table class="table collapse" id="collapse1">
<thead>
<tr>
<th>Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>this is a shop</td>
<td>Go to</td>
</tr>
</tbody>
</table>
</div>
Well your problem is that the no. of columns i.e. <th></th> elements in table head <thead> doesn't match the no. of columns in table body <tbody>.
So you need to put an extra <th></th> inside table head <thead> which could be blank like this -
Your code Fiddle
Updated Working Fiddle with code below -
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading" data-toggle="collapse" href="#collapse1">Shop 1</div>
<!-- Table -->
<table class="table collapse" id="collapse1">
<thead>
<tr>
<th>Number</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>this is a shop</td>
<td>Go to</td>
</tr>
</tbody>
</table>
</div>
Related
I need to make table header sticky to div fot, but still having the table x-scrollable, if it gets wider than the screen. I tried a lot of CSS combinations, but no success.
<body>
<div id="fot">
<form id="frmSearch_1" method="post">
<div id="tableDiv" style="overflow-x:auto;">
<table id="printGT" style="overflow-x:auto;width:100%;">
<thead>
<tr id="printGT_head">
<th scope="col">Nr.</th>
<th scope="col">Nr.</th>
<th scope="col">Nr.</th>
<th scope="col">Nr.</th>
</tr>
</thead>
<tbody>
<tr class="table-row">
<td>Nr</td>
<td>112</td>
<td>202a</td>
<td>asd</td>
</tr>
</tbody>
</table>
</div>
</form>
<span>LOT OF OTHER LONG CONTENT</span>
</div>
</body>
I am attempting to create a section at the top of a web page that will show 2 status tables side by side. I have this setup, but am unable to get one element working - adding a vertical scroll to the right-hand table.
I want the tables to occupy at most 25% of the viewport height and have a vertical scroll on the right table when the data would exceed that size (the left hand table data should remain small). The reason for this is that there will be other items added to the page underneath the table.
I am able to get a vertical scroll to work if I manually set the table to a certain pixel height, but this is not desired as I want it to be responsive to the screen size.
My page is using Bootstrap 5 and jQuery 3.6.
Here is an example of an attempt, you can also use this fiddle
HTML
<div class="page-body">
<div class="container-fluid h-25">
<div class="row justify-content-around h-25">
<div class="col">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="2" style="text-align:center">System Status</th>
</tr>
<tr>
<th>Active Jobs</th>
<th>Queued Jobs</th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
</tbody>
</table>
</div>
<div class="col overflow-scroll">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="3" style="text-align:center">Recently Executed Tasks</th>
</tr>
<tr>
<th>Job</th>
<th>Task</th>
<th>Start Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
...many more rows...
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
CSS
.page-body {
width:100vw;
height:100vh;
}
Instead of keeping to 25% of the view as I desire, the table expands to fill the entire page.
Any tips for how to fix this?
In order to perform the scrollable in a vertical position, you have to make sure that your parent element has a fixed height using CSS: e.g.: style="height:200px;" And your HTML code just looks like this.
<div class="page-body">
<div class="container-fluid h-25">
<div class="row">
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
I hope this will help you. If you just want to get more advance in Web development, please kindly check out my Web Programming Course
Thanks
Firstly, here is my UI:
My output to my right displayed as a result of using the tag <tbody> inside my ajax:
success: function (response){
var tbody="";
$.each(response.all_categories, function (key, cat) {
tbody+=`
<tr>
<td class="p-0 btn-category-list-col">
<button id="submit" type="submit" class="btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
</td>
</tr>`; });
$('tbody').html(tbody) }
My problem is that I am using two <tbody> in this same page, so the table to the right shows up in the left:
Is there some way to make my ajax function read a class or an id instead of the tag itself?:
So kind of like my line tbody+= becomes: tbody(class/id)+=
Here is my table that uses two tbody tags:
<div class="col-md-2 border">
<table id="categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
any help would be appreciated thanks
If you didn't use the same IDs for both tables(which is invalid html by the way) you could have used the table id to select the correct one.
From the html above you could use the table class to identify it
$('table.table-striped tbody').html(tbody);
or you could fix the invalid duplicate ids and use the id to select the correct table
<div class="col-md-2 border">
<table id="side-categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="main-categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
$('#main-categoryList tbody').html(tbody);
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 a bootstrap table and I want to place on each dynamic row under the Tara Image tab a button with the text let's say "get image". This is the code:
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">Lists all the missed balance-events entries that need further investigation.</div></div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true"
>
<thead>
<tr>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th>Tara Image</th>
</tr>
</thead>
</table>
</div>
</div>
I will post a picture with my actual table (I painted with red how I want my buttons to be placed):
var r = document.getElementById('MYTABLE').getElementsByTagName("tr");
for(i=0;i<r.length;i++){
var td=r[i].getElementsByTagName("td")[2];
var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode(td.innerHTML ); // Create a text node
btn.appendChild(t); // Append the text to <button>
td.removeChild(td.firstChild);
td.appendChild(btn);
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">Lists all the missed balance-events entries that need further investigation.</div></div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true"
>
<thead>
<tr>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th>Tara Image</th>
</tr>
</thead>
<tbody id='MYTABLE'>
<tr>
<td>1</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
<tr>
<td>2</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
<tr>
<td>3</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this helps!