I am trying to change header style a table with wenzhixin bootstrap-table.But class="info" doesn't work.
there is a code:
<table data-toggle="table" data-height="700" data-classes="table table-striped table-bordered table-hover">
<thead>
<tr class="info"> <!--it doesn't work-->
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<th>Item 0</th>
<th>10</th>
</tr>
</tbody>
</table>
Please help. How can I change style for header bootstrap-table?
P.S. if use bootstrap without wenzhixin bootstrap-table, then everything works, but to me it is necessary wenzhixin bootstrap-table
I had the same issue. bootstrap-table removes the classes and styles from the thead, tr, th tags. This is more than frustrating if you also use stickyTableHeaders (the background will not be white but transparent).
bootstrap-table provides a load-success event, which fires after the table has been rendered. You can use this to attach the class/style to your table afterwards. Be aware that your table needs an id
$('#myTable').on('load-success.bs.table', function (e, data) {
$('#myTable').stickyTableHeaders();
$('#myTable thead tr').css('background','white');
});
So to complete your snip, something like this should work:
<table id="myTable" data-toggle="table" data-height="700" data-classes="table table-striped table-bordered table-hover">
<thead>
<tr class="info"> <!--it doesn't work-->
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<th>Item 0</th>
<th>10</th>
</tr>
</tbody>
</table>
<script>
$('#myTable').on('load-success.bs.table', function (e, data) {
$('#myTable thead tr').css('background','pink');
});
</script>
Instead of the data-classes attribute, if you use only class, the problem is solved on firefox, chrome and ie7+.
Regards, hope it solves your problem.
Check with:
<style>
#tableID thead tr{
background-color: #0361cc; color:white;
}
</style>
Related
I have a Bootstrap 4 table that shows monetary value information, but I have a display problem in the responsive mode, then I detail my problem:
I have the following Html code:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>$ 1,543,3345,432</td>
<td>$ 1,456,334,4545</td>
<td>$ 1,000,0202</td>
</tr>
</tbody>
</table>
</div>
On the PC it is displayed perfectly:
But in response mode the problem appears:
What I want is that in the responsive mode, it looks like the pc. I have tried several ways to change the css to get this, but I could not.
Thank you very much!
You can give width to table and make it inline and another way is applying to white-space: nowrap; of table tr td
.tablewd{
min-width:450px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover tablewd">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>$ 1,543,3345,432</td>
<td>$ 1,456,334,4545</td>
<td>$ 1,000,0202</td>
</tr>
</tbody>
</table>
</div>
Use Bootstrap-4's text-nowrap class for the table to avoid text break.
/* Source: Bootstrap-4 source code*/
.text-nowrap {
white-space: nowrap !important;
}
https://codepen.io/anon/pen/zLpzwe
You should add more css:
.table td { white-space: nowrap; }
I have a responsive table where the end column shows money figures. Currently it looks like this:
But I want it to do this:
There may not be any data so the £ sign will be replace with N/A which should also be pulled to the right of the column.
The data is fetched from MySQL but here is a simplified snippet of my code:
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'>Budget: £123,456</div>
<div class='text-right'>Value: £200,000</div>
<div class='text-right'>Spent: N/A</div>
</td>
</tr>
</tbody>
Divs are useful but Ii don't think that be the best solution for this case maybe you need to use better the table properties
http://www.usabilidad.tv/tutoriales_html/colspan_y_rowspan.asp
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th colspan="2">Money</th>
</thead>
<tbody>
<tr>
<td rowspan="4">#1234</td>
<td rowspan="4">Josh Blease</td>
<td rowspan="4">Needs a new filter fixing</td>
</tr>
<tr>
<td>Budget</td>
<td>£123,456</td>
</tr>
<tr>
<td>Value</td>
<td>£200,000</td>
</tr>
<tr>
<td>Spent</td>
<td>N/A</td>
</tr>
</tbody>
</table>
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th>Reference</th>
<th>Client</th>
<th>Description</th>
<th>Money</th>
</thead>
<tbody>
<tr>
<td>#1234</td>
<td>Josh Blease</td>
<td>Needs a new filter fixing</td>
<td class='money'>
<div class='text-right'><span>Budget:</span> £123,456</div>
<div class='text-right'><span>Value:</span> £200,000</div>
<div class='text-right'><span>Spent:</span> N/A</div>
</td>
</tr>
</tbody>
and
#mytable tbody tr td .text-right span{
min-width:200px;
max-width:300px;
display: inline-block;
}
Spans need to be set as inline-block otherwise the width properties won't take hold as they are by default inline only elements.
Setting the min and max width will force the span container to not go below or above a certain point, meaning that your other text will be forced to stay to the left of the (example) 200px mark even if your initial text (as in spent) only ends up being (again, example) 80px
I need to target the first <td> element in a table row that is visible--meaning it does not have inline styling of display:none.
Here's the gotchyas:
They are not always hidden
Sometimes more than one is hidden.
I can't edit the HTML or use javascript/jQuery--This needs to be a pure CSS solution (hopefully)
Here is a quick sample of what the code looks like:
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
</tbody>
</table>
I tried messing with something like this to no avail:
table > tbody > tr > td:first-of-type:not([style*="display:none"])
Here's a fiddle to mess with
Thanks in advance.
If your hidden elements are always at the beginning of the row, you can use the direct sibling selector for this +.
td:first-child,
td[style*="none"] + td {
color: red;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td style="display:none">and</td>
<td>here's</td>
<td>an</td>
<td style="display:none">edge</td>
<td>case</td>
</tr>
</tbody>
</table>
This will style anything that isn't "display:none", but undo that when it gets to a subsequent "display:none".
table > tbody > tr > td:not([style*="display:none"]) {
color: red;
}
table > tbody > tr > td:not([style*="display:none"]) ~ td:not([style*="display:none"]) {
color: inherit;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
</tbody>
</table>
I´m sure it's an easy issue to solve but I'm unable to find the right way to do it.
I have a web with Bootstraps (hero-bootstrap template).
I have a link in a table and I'm unable to apply a helping class like "text-success" to the link.
Check the fiddle: https://jsfiddle.net/9dt5zo74/2/
<div class="table-responsive">
<table class="table table-condensed table-hover table-striped text-center">
<thead>
<tr class="active">
<th class="text-center">text</th>
<th class="text-center">text</th>
<th class="text-center">text</th>
<th class="text-center">text</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="text-success" href="#">something should work and it doesnt</a></td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>
</div>
<p class="text-success">that works</p>
As you will see, the class works for elements outside the table.
style in line 6400
table a:not(.btn),
.table a:not(.btn) {
color: #fff;
text-decoration: underline;
}
gets higher priority
Is there a way, how to group selectors in CSS?
To be precise lets have table with some content like this.
<table id="my-table">
<thead>
<tr>
<th><div class="my-div1"></div></th>
<th><div class="my-div2"></div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="my-div1"></div></td>
<td><div class="my-div2"></div></td>
</tr>
</tbody>
</table>
And I want to merge these style
#my-table tr > th .my-div1,
#my-table tr > td .my-div1 {
some styles
}
into something like this
#my-table tr > (th, td) .my-div1 {
some styles
}
Does CSS support anything like this?
CSS does not support it by default. Yet there are CSS preprocessors that I'm sure can help you with this.
Just skip over specifying th or td and jump right to the class.
<table id="my-table">
<thead>
<tr>
<th><div class="my-div1">A</div></th>
<th><div class="my-div2">B</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="my-div1">C</div></td>
<td><div class="my-div2">D</div></td>
</tr>
</tbody>
#my-table tr .my-div1 {
color: red;
}
http://jsfiddle.net/gdsbLhb2/