How can I put a responsive table next to the another one?
I used the HTML codes which I shared below. However, the second table has been placed under the first one.
<div class="row">
<div class="col-sm-6 .col-md-5 .col-lg-6">
<center><h4>GÜNLÜK DEMİR FİYATLARI</h4></center>
<table class="table table-striped">
<thead>
<tr>
<th>Bölge</th>
<th>Tarih</th>
<th>Kalın Demir</th>
<th>İnce Demir</th>
</tr>
</thead>
</table>
<center><h4>PİYASA FİYATLARI</h4></center>
<table class="table table-striped">
<thead>
<tr>
<th>Döviz</th>
<th>Tarih</th>
<th>Alış</th>
<th>Satış</th>
</tr>
</thead>
</table>
</div>
</div>
Here is the screenshot of my result
Here is the full and live link.
How can I put two responsive tables in one column?
You need to wrap your tables (and headers) with the col- classes. I created a working fiddle.
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">
<center><h4>GÜNLÜK DEMİR FİYATLARI</h4></center>
<table class="table table-striped">
<thead>
<tr>
<th>Bölge</th>
<th>Tarih</th>
<th>Kalın Demir</th>
<th>İnce Demir</th>
</tr>
</thead>
</table>
</div>
<div class="col-sm-6 col-md-5 col-lg-6">
<center><h4>PİYASA FİYATLARI</h4></center>
<table class="table table-striped">
<thead>
<tr>
<th>Döviz</th>
<th>Tarih</th>
<th>Alış</th>
<th>Satış</th>
</tr>
</thead>
</table>
</div>
</div>
https://jsfiddle.net/ouwf90br/
Add html like this:
<div class="table-row">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">
<center><h4>GÜNLÜK DEMİR FİYATLARI</h4></center>
<table class="table table-striped">
<thead>
<tr>
<th>Bölge</th>
<th>Tarih</th>
<th>Kalın Demir</th>
<th>İnce Demir</th>
</tr>
</thead>
</table>
<center><h4>PİYASA FİYATLARI</h4></center>
<table class="table table-striped">
<thead>
<tr>
<th>Döviz</th>
<th>Tarih</th>
<th>Alış</th>
<th>Satış</th>
</tr>
</thead>
</table>
</div>
<div class="col-sm-6 col-md-5 col-lg-6">
<center><h4>GÜNLÜK DEMİR FİYATLARI</h4></center>
<table class="table table-striped">
<thead>
<tr>
<th>Bölge</th>
<th>Tarih</th>
<th>Kalın Demir</th>
<th>İnce Demir</th>
</tr>
</thead>
</table>
<center><h4>PİYASA FİYATLARI</h4></center>
<table class="table table-striped">
<thead>
<tr>
<th>Döviz</th>
<th>Tarih</th>
<th>Alış</th>
<th>Satış</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
After that add css for remove margin from row:
.table-row .row{margin:0}
Related
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);
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>