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.
Related
I set a bootstrap table to display a cryptocurrency ticker and I would like to display a line in between separating columns, using the border properties I guess, but I don't know exactly how to set the right side borders of the cells visible, so they form the vertical lines along rows.
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- HTML -->
<div className="table-responsive-l">
<table className="table table-borderless fw-lighter table-xxl">
<tbody>
<tr className="fs-5 row-bottom-margin" id="currency_labels">
<th>BTC</th>
<th>ETH</th>
<th>XRP</th>
<th>BCH</th>
<th>EOS</th>
<th>DOGE</th>
</tr>
</tbody>
<tbody>
<tr className="fs-5">
<th>$1.00</th>
<th>$2.00</th>
<th>$3.00</th>
<th>$4.00</th>
<th>$5.00</th>
<th>$6.00</th>
</tr>
</tbody>
<tbody>
<tr className="fs-6">
<th>+0.1%</th>
<th>-0.2%</th>
<th>+0.3%</th>
<th>-0.4%</th>
<th>+0.5%</th>
<th>-0.6%</th>
</tr>
</tbody>
</table>
</div>
Can you check the below snippet and let me know if something like this is what you are expecting?
th:not(:last-child) {
border-right: 1px solid #444;
}
table {
border-spacing: unset;
}
<div class="table-responsive-l">
<table className="table table-borderless fw-lighter table-xxl">
<tbody>
<tr className="fs-5 row-bottom-margin" id="currency_labels">
<th>BTC</th>
<th>ETH</th>
<th>XRP</th>
<th>BCH</th>
<th>EOS</th>
<th>DOGE</th>
</tr>
</tbody>
<tbody>
<tr className="fs-5">
<th>$1.00</th>
<th>$2.00</th>
<th>$3.00</th>
<th>$4.00</th>
<th>$5.00</th>
<th>$6.00</th>
</tr>
</tbody>
<tbody>
<tr className="fs-6">
<th>+0.1%</th>
<th>-0.2%</th>
<th>+0.3%</th>
<th>-0.4%</th>
<th>+0.5%</th>
<th>-0.6%</th>
</tr>
</tbody>
</table>
</div>
Have added border-spacing: unset; property to table in order to avoid the space between rows.
Trying to build a table with sort icon next to each column name. (Using bootstrap and font awesome)
Please, refer to the code below
HTML
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
</tr>
</table>
CSS
th::after {
font-family: FontAwesome;
content: "\f0dc";
float: right;
text-align: right;
}
Why float and text-align not working here? Please let me know right CSS code to get it right. I also don't want that sort icon to wrapped up like normal text in smaller screens. It should be in fixed right place.
i think your mixing up the table tags
<table></table> table tag
<thead></thead> table header
<th></th> table column
<tbody></tbody> table body
<tr></tr> table row
<td></td> table cell
<tfoot></tfoot> table footer
but to answer your question with the way your current data is structured do it like this just add an empty table cell or column as the case maybe to your table row then use the css below to add what you want to the cell.
<!DOCTYPE html>
<html>
<head>
<title>extra table cell</title>
<style type="text/css">
tr th:last-child::after {
font-family: FontAwesome;
content: " i am what you want";
}
</style>
</head>
<body>
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Name and Surname</th>
<th></th>
</tr>
</table>
</body>
</html>
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 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 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}