So I want every table for my website to have the same bootstrap styling with
class="table table-striped table-hover "
However I don't really want to go into every table and put this in in case I want to change it in future. Is there a way for me to just set,
.table{
/*Inherit all these classes*/
}
You'd need to use LESS or SASS and make a mix-in for this. If you can't use LESS/SASS, you could overwrite .table as follows if you absolutely needed to, using something like this (pulled from BS 3.2):
/* .table-stripe styling */
.table > tbody > tr:nth-child(odd) > td,
.table > tbody > tr:nth-child(odd) > th{
background-color: #f9f9f9;
}
/* Default .table-hover behavior */
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
background-color: #f5f5f5;
}
/* .table-hover styling for "active".
Repeat this block for Success, Info, Warning, Danger, etc.
using your preferred colors */
.table > tbody > tr > td.active:hover,
.table > tbody > tr > th.active:hover,
.table > tbody > tr.active:hover > td,
.table > tbody > tr:hover > .active,
.table > tbody > tr.active:hover > th {
background-color: #e8e8e8;
}
You potentially could try combining all the rules from the
table table-striped table-hover
classes into one class, but you also need to capture the rulesets targeted by table table-striped table-hover child and descendant selectors also.
So in the end you will end up creating way more work for yourself.
e.g. if you look at the boostrap CSS source here - https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L255
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
these sub rules would also need to be rewritten.
I've shown 3 CSS rules.
If you do a search for the term .table in the bootstrap CSS there are 318 instances which would need to be resolved.
You could reduce that by compiling your own LESS or SASS, but you will still have to deal with the child and descendant issue.
Possible solution
If you have a decent text editor, that using live templates or something like emmet, just create a short cut like tab+ which the text editor expands out to table table-striped table-hover
Related
I need to add some custom CSS to the Angular Bootstrap UI Datepicker, which has been relatively easy so far. I've wrapped the uib-datepicker element in a div, and then use that div's id to alter this specific calendar.
HTML
<div class="modal-body confirmContent" id="calendarModal">
<uib-datepicker id="datepickerWeek" ng-model="selectedWeek" class="well well-sm" datepicker-options="datepickerWeekConfig"></uib-datepicker>
</div>
CSS
#calendarModal > .well > table thead tr th button:hover,
#calendarModal > .well > table tbody tr td button:hover,
#calendarModal > .well > table tbody tr td button.btn-info.active,
#calendarModal > .well > table tbody tr td button.btn-info.active:focus{
background-color: #155f8e;
}
However now I need to highlight an entire tr based on when the .btn-info class becomes .active:focus. I've researched the :has psuedo-class, however I don't think I'm getting the syntax right. Essentially what I want is something like this:
#calendarModal > .uib-datepicker > .uib-monthpicker > tbody tr:has(> td button.btn-info.active:focus)
Unfortunately this solution must be CSS-only. jQuery is verboten and since this is a third-party plugin I don't own the HTML in a view/partial somewhere. Any help/suggestions would be greatly appreciated.
I am trying to use css bootstrap framework in my project
I am using table with the following classes table table-bordered table-striped
I want to remove the borders from all the column except the first column.
Here is my table in a fiddler https://jsfiddle.net/8yf0v3xt/16/
Basically in this screenshot, I only want to remove the vertical borders in the red rectangle border.
<table class="table table-bordered table-striped">
<thead>
<tr><th></th><th></th>...</tr>
</thead>
<tbody>
<tr><th score="row"><th></td><td></td>...</tr>
...
</tbody>
</table>
EDITED
Or, if I remove the table-bordered class, how can I only add a column on the very first column? something like this screenshot
How can I do that?
You need to look into the :first-child pseudo selector. Link here
The :first-child selector is used to select the specified selector, only if it is the first child of its parent.
You can select all of the td elements and remove the border from them all with:
table tr td { border: none; }
And then to add unique styling to just the first element:
table tr td:first-child { border: default; } /* Or whatever styling you may wish..
The same can be done with :last-child which will of course select the last element in oppose to the first.
And if you need to be even more specific again.. You can use :nth-child(x) where x is the number of the element that you wanted.
Fiddle: https://jsfiddle.net/8yf0v3xt/18/
UPDATE
Fiddle: https://jsfiddle.net/8yf0v3xt/22/
I've removed the .table-bordered class and added the following CSS:
table { border: 1px solid #ddd; }
table.table tr, table.table tr th, table.table tr td { border: none; }
table.table tr th:first-child, table.table tr td:first-child { border: 1px solid #ddd; }
I have used the pseudo selectors like explained above to add styling to just the first column.
Look at this fiddle: http://jsfiddle.net/czz2ejfw/1
Style for my table:
td {
color: #669;
}
tbody tr:hover {
color: red;
}
The text color should be red when we hover. In fact, if you look at developer tools you see that red should be applied. But incredibly, it displays as #669. WTH?
This is consistent across Firefox, Chrome, Safari, and Opera.
It isn't more specific. It matches a different element.
td { color: #669; } overrides the default stylesheet (which is probably something like td { color: inherit; }) because author stylesheets override browser stylesheets.
If you want to match the td when the tr is hovered, then you need to mention the td in the selector (e.g. with a descendant combinator).
tbody tr:hover td {}
<tr> is getting the color:red; but there is nothing there to be styled red.
Instead you would need to do this, which applies red to all <td> cells that are children of the parent <tr>:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td {
color: red;
}
JS Fiddle Demo
As actually already said in a comment, the td is a child of the tr, so although the background of the tr changes, if you can't see it anywhere because none of the td's are transparent you won't get anywhere. The correct solution thus is to either make the td's transparent (default) and instead style the tr's always, or use tr:hover td{} to override the styles of the td instead of styling the tr.
Update that part of your CSS to this and it will work:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td{
color: red;
}
Red is higher priority in your version because it is specific for td the tbody tr is not that specific
I have a HTML table, with <thead> + <tbody> + <tfoot>. I need to show <tfoot> only when <tbody> has no rows. I know how to do it with JS/jQuery, but maybe there is a pure CSS solution?
Use :empty
Demo (Show tfoot when tbody has no rows)
table tbody:empty + tfoot {
display: table-footer-group;
}
table tbody + tfoot {
display: none;
color: red;
}
Hide tfoot when tbody has some content
table tbody:not(:empty) + tfoot {
display: block;
}
table tbody + tfoot {
display: none;
color: red;
}
Demo 2
Explanation:
Too many revisions, I just wanted to provide 2 selectors, first is table tbody:empty + tfoot which will select tfoot if the tbody IS EMPTY, and the second one is table tbody:not(:empty) + tfoot which will select tfoot if tbody IS NOT empty.
Note: I am using + which is an adjacent selector, so as you see, I
have tfoot element, after the tbody element, if it is before
tbody than you need to use JS or jQuery as you select reverse in
CSS. Also, make sure you use display: table-footer-group; as pointed by Mr Lister for tfoot element and not display: block;
I’m afraid it can be done with CSS only in the case that the tbody element is completely empty and does not contain even whitespace. For example,
<tbody>
</tbody>
is not empty, as it contains a linebreak (it has a text node child containing a line break). The :empty selector matches only elements that have no children at all.
If you can count on having the tbody element strictly as <tbody></tbody> when it has no rows, you can use
tbody:not(:empty) + tfoot {
display: none;
}
I'm styling a table and I'm using various first-child, nth-child and last-child declarations such as the below:
.thankYouTable tbody tr td:first-child,
.thankYouTable tbody tr td:nth-child(4),
.thankYouTable tbody tr td:nth-child(6),
.thankYouTable tbody tr td:nth-child(7),
.thankYouTable tbody tr td:nth-child(8)
{
border-right:1px solid #fff;
}
Is there a way for me to shorten this syntax? Its just out of curiosity really as I've had to do this quite a bit and it makes the stylesheet quite "messy". Whilst I can understand it, it may take others in future longer to decipher this. Is there a "best practice" for doing this kind of thing or is what I've done ok? (Realise this may be subjective so feel free to not answer this part).
For example would this not work:
.thankYouTable tbody tr td:first-child,
.thankYouTable tbody tr td:nth-child(4),(6),(7),(8)
{
border-right:1px solid #fff;
}
And I'm talking about pure CSS here, not using any kind of script.
The only way i can see you shorten it down is by using equation:
[..]
.thankYouTable tbody tr td:nth-child(4), //fourth element
.thankYouTable tbody tr td:nth-child(n+6) //every element after and including the 6th element
[..]