I got 2 tables with same HTML and both declared as:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-body">
<table class="table table-sm table-hover table-responsive">
<thead>
<tr>
<th>Item 01</th>
<th>Item 02</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 01</td>
<td>Item 02</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
And this is what I got on my screen:
The second and consecutive tables declared with the same HTML don't get 100% width on thead and tbody...
What is wrong here?
UPDATE:
My first table was working because of the content of the last line, it was long enough to make it fit 100% on my card div.
Actually it's a issue on Bootstrap 4, so the -2 reputation on this question are invalid. Thanks.
Found out that it's a issue on Bootstrap V4, you can see in this issue, and my first table is not working, it's just the content of the last line that is long enough to fullfil the table width, so it looks like it works.
EDIT: It got fixed by adding the class table-responsive as a parent div of the table, here is the ship list for the fix and the issue that reported the bug.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm table-hover">
<thead>
<tr>
<th>Item 01</th>
<th>Item 02</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 01</td>
<td>Item 02</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Related
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
This is my problem
As u see, i dont know why the table get that format inside the card.
I need the table to be centered or at least not show that blank space that shows at this time. ... this is my code(im using angular 6)
<div class="row">
<div class="col-md-6">
<div class="header">
<h4 style="padding:10px" class="title">Dispositivo de Ejecucion</h4>
</div>
<div>
<table class="table table-bordered table-condensed table-responsive ">
<thead class="thead-dark">
<tr>
<th>Marca</th>
<th>Sistema Operativo</th>
<th>Version</th>
<th>Modelo</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{dispositivoCdp[0].nombredispositivo}}</td>
<td>{{dispositivoCdp[0].sistema_operativo}}</td>
<td>{{dispositivoCdp[0].version}}</td>
<td>{{dispositivoCdp[0].modelo}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-6 justify-content-center">
<div class="header">
<h4 style="padding:10px" class="title">Tiempo de Ejecucion</h4>
</div>
<table class=" table table-bordered table-responsive ">
<thead class="thead-dark">
<tr>
<th>Inicio</th>
<th>Fin</th>
<th>Duracion</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{dispositivoCdp[0].nombredispositivo}}</td>
<td>{{dispositivoCdp[0].sistema_operativo}}</td>
<td>{{dispositivoCdp[0].version}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Have any suggestion of what im doing wrong? i try to use table-sm inside the table class but i dont geet any results
Use this
<table class="table table-bordered table-condensed table-responsive" style="display:table">
Try to delete "table-responsive" in your class.
I think that will solve your problem.
The problem in your code is the structure, to make a table "responsive", in Bootstrap 4, you have to insert it inside a <div> with table-responsive class, not in the table classes.
Esample:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Read the docs: https://getbootstrap.com/docs/4.6/content/tables/#responsive-tables
I cant seem to get this right, i made a divider through css divs and it shows on page but when in print the lines i made doesnt show..what other options should i do? im running out of ideas, what am i doing wrong how can i achieve this
here is what i want ot achieve
heres my css
heres the print preview
page code:
<div id="page-wrapper">
<div class="row">
<div class="col-md-12">
<div class="panel-body">
<p style="text-align:center;"><b>PROPERTY ACKNOWLEDGEMENT RECEIPT</b></p>
<p style="text-align:right;">Control No.</p>
<div class="row">
<div class="col-md-16">
<table class="table table-hover table-striped table-bordered table-condensed" class="">
<thead>
<tr>
<th style="text-align:center;">Quantity</th>
<th style="text-align:center;">Unit</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center;">Unit Value</th>
<th style="text-align:center;">Property No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>bucket</td>
<td style="font-size:12px;">oremloremloremloremloremloremloremloremloremlorem</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr style="background-color:black;"> NOTE:
<div style="height:2px;width:100%;background-color:black;"></div>
<div style="width:2px;height:100px;background-color:black;margin:0px auto;"></div>
</div>
</div>
</div>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
I'm trying to get a button into a panel-heading section, but I can't get it to display on the same line. I've managed to get it centered with help of some of the questions on StackOverflow where others asked about a button on the right of the header, but adding the button in seems to make the header taller.
I've got an example showing the difference Bootply
Code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has space below</b>
<div class="btn-group pull-right">
new
</div>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has no space</b>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Does anybody have any ideas why adding a button or button group to the panel heading increases the height? Any tips on getting the height to what it was before the button?
because you are using a btn-sm (for small-devices) if you use btn-xs (for extra-small devices) that space will go away due to having a smaller padding
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has space below</b>
<div class="btn-group pull-right">
new
</div>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has no space</b>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I want to put side-by-side two tables in the same grid-row but tables just stack over when run the code below:
<body>
...
<div class="container-fluid">
<div class="starter-template">
<div class='panel panel-primary'>
<div class='panel-heading'><h1>Main Title</h1></div>
<div class='panel-body'>
<div class='row-fluid'>
<h4>Title</h4>
<div class='span4'>
<table class='table table-bordered'>
<thead>
<tr><th>feat1</th><th>feat2</th></tr></thead>
<tbody>
<tr><td>132</td><td>value a</td></tr>
<tr><td>114</td><td>value b</td></tr>
</tbody>
</table>
</div><!--closes table1-->
<div class='span4'>
<table class='table table-bordered'>
<thead>
<tr><th>feat1</th><th>feat3</th></tr>
</thead>
<tbody>
<tr><td>264</td><td>val b</td></tr>
<tr><td>3</td><td>val c</td></tr>
</tbody>
</table>
</div><!--closes table2-->
</div>
</div><!--closes div panel-body-->
</div><!--closes div panel-->
</div> <!-- /.starter-template -->
</div><!-- /.container -->
...
</body>
The result is one table in all the row and then the second one below the first one.
Check out the fiddle
Use col-xs-6 if you still want to display the tables side by side when on smaller screens.
Use col-lg-6 if you want to display the tables on separate rows on smaller screens.
http://jsfiddle.net/DTcHh/1680/
<div class="row-fluid">
<div class="col-xs-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>One</th>
<th>One</th>
<th>One</th>
</tr>
<thead>
<tbody>
<tr>
<td>Two</td>
<td>Two</td>
<td>Two</td>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>One</th>
<th>One</th>
<th>One</th>
</tr>
<thead>
<tbody>
<tr>
<td>Two</td>
<td>Two</td>
<td>Two</td>
</table>
</div>
</div>
</div>