I've been trying to implement DataTables into my web site, I'm using Bootstrap 4 styling.
This is the HTML code:
<div class="panel-body">
<div class="dataTable_wrapper table-responsive">
<table class="table table-striped table-bordered table-hover display compact table-sm" id="TblDetalleComision">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
Do I need to wrap the table with CSS?
What am I doing wrong?
give tbody to class "table-sm" Like
<tbody class="table-sm"></tbody>
It worked for me
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
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'm beginner who just started
i've tried to following video of creating forum using bootstrap 4 in youtube
but table-responsive doesn't work
i think my code is same as in video but browser not the same
my broswer
browser in youtube
here's my table. i hope someone help me..
thanks
<table class="table table-striped table-bordered table-responsive">
<thead class="thead-light">
<tr>
<th scope="col" class="forum-col">Forum</th>
<th scope="col">Topics</th>
<th scope="col">Posts</th>
<th scope="col" class="last-post-col">Last post</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3 class="h5">Forum name</h3>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</td>
<td>
<div>5</div>
</td>
<td>
<div>18</div>
</td>
<td>
<h4 class="h6">Post name</h4>
<div>by Author name</div>
<div>05 Apr 2017, 20:07</div>
</td>
</tr>
<tbody>
you should wrap the table in element and take the .table-responsive class out of tag and put that class in wrapping div element. .table-responsive class should include break point size for example .table-responsive-sm
<div class="table-responsive-sm">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>.</th>
Your first TD is not set to word wrap. You can add the following CSS declaration to your TD elements to resolve this issue:
word-break:break-all;
Since the td content length is so high. You need to break the words inorder to get responsive table
Look at this Fiddle JSFiddle
CSS:
td{
word-break:break-all;
}
I'm looking for a solution on how not to show my table if there is no data in it. I tried with *ngIf but it didn't work, maybe I did it wrong.
I don't think [hidden] is a good solution.
Here is my code :
<div *ngIf="exceptions">
<h1 class="applicationTitle">Exceptions</h1>
<table class="table table-hover table-condensed">
<th>Date</th>
<th>Timeslot</th>
<tr *ngFor="#exception of exceptions">
<td>{{exception.date}}</td>
<td>{{exception.value}}</td>
</tr>
</table>
</div>
You can use *ngIf
<table *ngIf="exceptions" class="table table-hover table-condensed">
<th>Date</th>
<th>Timeslot</th>
<tr *ngFor="let exception of exceptions">
<td>{{exception.date}}</td>
<td>{{exception.value}}</td>
</tr>
</table>
<div *ngIf="exceptions.length > 0">
<h1 class="applicationTitle">Exceptions</h1>
<table class="table table-hover table-condensed">
<th>Date</th>
<th>Timeslot</th>
<tr *ngFor="#exception of exceptions">
<td>{{exception.date}}</td>
<td>{{exception.value}}</td>
</tr>
</table>
</div>
You just need to update your If condition that's all.
<table class="table table-hover table-condensed" *ngIf="exceptions.length > 0">
Keep in mind though ngIf will remove the element from the DOM, which might be an expensive operation if your table is really large. In that case you might be better of using [hidden] after all.