I was simple table and I used bootstrap and classes table and table-striped. It works well.
<h3>Old table</h3>
<table class="table table-striped">
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tbody>
<tr><td>Audi</td><td>A1</td></tr>
<tr><td>Audi</td><td>A2</td></tr>
<tr><td>Audi</td><td>A3</td></tr>
<tr><td>Audi</td><td>A4</td></tr>
</tbody>
</table>
But now I have to complicate my table and use multiple tbody in tabled element (each tbody has two tr element). So bootstrap class table-striped does not work. There is any way to do it in bootstrap? The rows with cars should be table-striped but comment rows not.
<h3>Current table</h3>
<table class="table table-striped">
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tbody>
<tr><td>Audi</td><td>A1</td></tr>
<tr class="comment"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A2</td></tr>
<tr class="comment hide"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A3</td></tr>
<tr class="comment"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A4</td></tr>
<tr class="comment hide"><td colspan="2">Comment...</td></tr>
</tbody>
</table>
Plunker example
The work around for bootstrap would be much more complicated than just putting in your own custom classes. The bootstrap source for table-striped simply makes all odd rows the different color. That means that you're likely going to getting way further in depth and causing yourself way more trouble if you try to have bootstrap do it for you versus just putting in the classes yourself.
$('tbody').parents('.fixed-table-container').find('tr:even').addClass( 'even' );
.even { background: #f9f9f9; }
And in bootstrap.min.css find --> .table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9} replace --> .table-striped>tbody>tr:nth-of-type(odd){background-color:none}
Related
I used angular 6 datatable to paginate my data in table.
https://www.npmjs.com/package/angular-6-datatable
Everything works fine but i cant deal with style in footer of mfBootstrapPaginator
As you can see, this items are not in one line. How to set them in one line or at least next to each other?
<div class="table-responsive">
<table id="tablePreview" class="table table-hover table-bordered" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.data; let i = index;">
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- I got 8 columns in my project -->
<td colspan="8">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,25, 50, 100]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
I use Angular 6, Bootstrap 4
Change the display of the pagination class:
.pagination {
display: inline-flex !important;
}
I now, the question is older but maybe it helps someone. I wrote this:
<style>
ul.pagination {display: inline-flex !important;}
.pagination li.active .page-link {background-color: rgb(54,61,71) !important; border-color: rgb(54,61,71) !important;}
</style>
in my index.html befor the head close tag and it works for me. I hope it helps someone.
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.
I'm currently working on a rails application where I want to highlight a row with a background colour, but in addition to that, within that row highlight a data cell with a different colour.
The problem I have is the styling for the td appears to be ignored. I just get the background colour for the whole row.
Inspecting the css client side it appears that the styling I apply for the td simply isn't there.
The generated html
<table id="project-table" class="table table-hover">
<thead>
<tr>
<th>Row</th>
<th>Fubar</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row cheese">
<td>Row 1</td>
<td class="'wibble'">Hello World</td>
</tr>
</tbody>
</table>
The sass
#project-table tbody tr.cheese {
background-color: yellow;
& td.wibble {
background-color: blue;
}
}
What am I doing wrong?
ps: using bootstrap 3 but I don't think that's relevant to this issue, is it?
UPDATE [SOLVED]
Ok, it appears I was being blind and hadn't realised an extra set of double quotes were being generated for class="'wibble'" - thanks to #Dekel for quickly pointing that out, and allowing me to find the cause of the real issue.
To solve the issue of the generation of extra quotes I had to mark the output as html_safe:
<td<%= ((index == #project.active_pattern_index) ? ' class="wibble"' : '').html_safe %>>
<%= pattern.row(count).instruction %>
</td>
The class in the td tag should be wibble (and not 'wibble').
You should not use the single-quotes inside the class attribute classes: ''
<table id="project-table" class="table table-hover">
<thead>
<tr>
<th>Row</th>
<th>Fubar</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row cheese">
<td>Row 1</td>
<td class="wibble">Hello World</td>
</tr>
</tbody>
</table>
I have a simple table from Twitter Bootstrap v3.0.3. It is just 2 columns. Below is the html code for the table.
<table class="table table-bordered">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Address</td>
<td>Test</td>
</tr>
</tbody>
</table>
I would like the columns of the table to be closer to each other. How can this be done? Thank you.
If I understand correctly, you want the width of the table to fit the content.
The simplest way to do this would be to set width: auto:
<table class="table table-bordered" style="width: auto">