Lets say we have generic css class for table to use on all places in our application. Lets consider also this style has first-child selector.
tr td:first-child { ... }
I would like to use this class for an specific table but skip all first-child styles.
Since this is generic style class for tables i cant remove from it and also dont want to handle this with inline styling.
Thanks
You could be more specific for that particular table, assuming it has a class or an id you can use:
tr td:first-child {
color: red;
}
.test tr td:first-child {
color: green;
}
<table>
<tr>
<td>First td</td>
<td>Second td</td>
</tr>
</table>
<table class="test">
<tr>
<td>First td</td>
<td>Second td</td>
</tr>
</table>
Excuse the limited markup, but you get the point. Because the .test tr td:first-child {} class is more specific than the generic style, it overrides it, but only for the table with the class test.
More info on specifity: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
Related
Trying to alternate row colors in my tailwindcss styled page, the code below has no effect on my <tr>s:
<style>
tr:nth-child(even) {
class="bg-gray-50";
}
tr:nth-child(od) {
class="bg-white";
}
</style>
What am I missing out please?
As stefan.at.wpf mentioned you should extend your tailwind config like so:
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
backgroundColor: ['even'],
}
},
}
Then you can use even in your classes in like so:
<tr class="even:bg-grey">
The Tailwindish way would be to use even:someclassor odd:someclass. Needs to be enabled first, see details here
It seems to me that you are mixing CSS styles and HTML classes. You have to go for one or the other. Assuming that .bg-gray-50 corresponds to #ccc, you could apply the styles as follows:
<style>
tr:nth-child(even) {
background-color: #ccc;
}
tr:nth-child(od) {
background-color: #fff;
}
</style>
Add even and odd prefixes to your class list
<tbody>
<tr class="even:bg-gray-50 odd:bg-white"></tr>
</tbody>
See First, last, odd, and even from their documentation
You are trying to set kind of css classes into css tags.
Plus I advice you to set border-collapse: collpase; to your table, this way, you won't have the separation between your cells.
You must set css directly like below demo:
table{
border-collapse: collapse;
}
tr:nth-child(even) {
/*class="bg-gray-50";*/
background: gray;
}
tr:nth-child(od) {
/* class="bg-white";*/
background: white;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
You can achieve this using #apply and then listing the tailwind classes you want applied to the element in question.
tr:nth-child(even) {
#apply bg-blue-50;
}
I am trying to hide this:
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
And this is my attempt:
thead.col-image all {
display: none;
}
^ this didn't work - any idea?
Thanks!
You are calling the wrong element and ALSO 'all' is not a selector;
thead.col-image all {} // is calling e.g. <thead class="col-image">
It should be
thead tr th.col-image.all { display: none; }
thead.col-image all means <all> tags in <thead class='col-image'>
correct css for your code should be
thead .col-image.all {
display: none;
}
https://jsfiddle.net/pb5k4v63/26/
with <th> tag only heading will disappear.
Attach a class for <th>or <td> or <tr> depending on your requirement.
and for that class apply the property
{visibility:hidden} which will not affect alignment of your table.
where as {display:none} can affect the alignment (though it works.)
you can use class for td th or add a span to text you want to hide and add class to it
.hide{
visibility:hidden;
}
<table>
<tr>
<td>hello</td>
<td class="hide">hide me</td>
<td>and also <span class="hide">hide me</span></td>
</tr>
</table>
TL;DR Wrap your <thead>, <th>, etc. within the <table> element. Also make sure you are calling the proper elements in your CSS.
An HTML table is defined with the <table> tag.
So in essence you have the <th>, <thead>, etc. elements operating outside of a <table>, so you are breaking your code because the <th>, <thead>, etc. require the parent <table> element to function properly.
Why you may ask? As stated above a table is defined with the <table> tag, so you do not really have a table on your page.
In conclusion "wrap your tables rows, heads, etc within the <table> element for now on.
Here is the code:
HTML
<table>
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
</table>
CSS
th.col-image.all{
display: none;
}
You can view the code live here: https://jsfiddle.net/W3Develops/nbf17pus/6/
I also added another table in there so you can see how to properly make a table.
Here is a link to Mozilla Developer Network and W3Schools so you can learn more about making tables. Good luck:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
https://www.w3schools.com/html/html_tables.asp
Also you were calling classes for thead when you should have been calling classes for th.
Cheers.
Lets say I have the following table:
<table style="width:500px">
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
Now if I use the first-child selector to apply a style to the first TD, is there anyway I can have it ignore the td that has the colspan (even though of course this is the first-child)?
table tr td:first-child{
width:100px;
}
I would be happy to give the td with the colspan it's own class name if there was then a way I could modify my selector to say apply to first child except when the class name is x?
use :not([attr="val"])
table tr td:first-child:not([colspan="#NUMBER OF COLSPAN"]){
width:100px;
}
Try this:
table tr td:first-child:not(.ignore) {
width:100px;
}
(Where you give the td that you want to ignore a class of "ignore")
Why not just give the class the opposing property?
table tr td:first-child{
width:100px;
}
.your_class {
width:auto !important;
}
One simple way is to just add a class to the first TD that you actually want to select:
<table style="width:500px">
<tr>
<td class='selectable'>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
Then hit it with:
table tr td.selectable {
width: 100px;
}
Alternatively, you could try jQuery and put a class name of "ignoreMe" on the row you don't want affected with:
$('table tr td:first-child').not('.ignoreMe').css({width:100});
For your example you can use :not([colspan]) which ignores the any td with colspan defined. Something like this:
table tr td:first-child:not([colspan]){
width:100px;
}
I know of the selector :not() but it doesn't work, like tr:not(tr:first-child):hover. I want to style the other trs but not the first one, because it holds the headings. How can I do this without using an id or class?
You can only use simple selectors in :not(), try
tr:not(:first-child)
http://jsfiddle.net/mowglisanu/Sn7Uw/
Another option would be to use the th element which is specifically represents the header cell in a table.
Example
<table>
<thead>
<tr>
<th>Number</th>
<th>element</th>
</tr>
</thead>
<tbody>
<tr>
<td>4.1.1</td>
<td>html</td>
</tr>
<tr>
<td>4.2.1</td>
<td>head</td>
</tr>
</tbody>
</table>
Use the adjacent sibling combinator. As a bonus, it's a bit more widely supported than :not()
TR + TR { background-color: silver; }
TR + TR:hover { background-color: green; }
http://jsfiddle.net/ETYQN/2/
Put your headers in a <thead> and your stylable rows in the <tbody> then use:
tbody tr:hover { background: red }
and it won't matter what the contents is.
http://jsfiddle.net/stevemarvell/we4a6/
I appending table dynamically using javascript in html with say 50000 cells.
<table id="dataTable">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
.....
<td>data1</td>
</tr>
..........
<tr>
<td>data1</td>
<td>data2</td>
.....
<td>data1</td>
</tr>
</tbody>
</table>
I'm styling the td with descendant selector as,
#dataTable td{
text-align:right;
border:1px solid #adadad;
padding-right:10px;
}
Another option is to give class to each td using class selector.
<table id="dataTable">
<tbody>
<tr>
<td class="format">data1</td>
<td class="format">data2</td>
.....
<td class="format">data1</td>
</tr>
..........
<tr>
<td class="format">data1</td>
<td class="format">data2</td>
.....
<td class="format">data1</td>
</tr>
</tbody>
</table>
Here we have used format class for styling.
.format{
text-align:right;
border:1px solid #adadad;
padding-right:10px;
}
I'm facing performance issue while rendering the table in browser. Is this because I've used DESCENDANT SELECTOR INSTEAD OF CLASS SELECTOR.
Or Browser is not able handle large data.
About the table performance
Tables can be slow to render mostly due to the dynamic column sizes that need to be calculated and set on every change.
You can solve this by specifying a fixed size for each column, like so:
#dataTable td {
width: 100px; /* Set sizes appropriately */
}
This should make your table more performant
About CSS performance
CSS selects by the last token first, so for example, to execute the following selector:
#dataTable td
CSS will first select ALL td elements and then check if each of them is a descendant of #dataTable. Technically, specifying a class for each cell is faster.
However, this is probably not significant enough to pay for by complicating your overall design.
I recommend reading Efficiently Rendering CSS by CSS-Tricks to get a better idea about CSS and performance.