I have a table inside of a table, a really simple one.
What I wanted to do is to avoid having border-bottom of td tag in the last row (tr) of the table. What I did is this:
tbody tr:last-of-type td { border-bottom: none; }
I was thinking that this is it, but then I checked the last row of not nested table and the whole nested table was not having a bottom border. Is there a way to avoid this using simple CSS without classes etc.?
To achieve no border bottom of the nested table, you can do so like so:
tbody table td {
border-bottom: none;
}
Note - the above rule makes assumptions about your CSS, which you haven't shared with us. Due to you not including the CSS that applies the border in the first place, it is possible the above won't work due to CSS specificity.
For example, if your rule that adds border to the table is:
tbody tr td {
border-bottom: [whatever style];
}
Then, the selector you need to use to remove the nested table border is:
tbody tr table td {
border-bottom: none;
}
Add your CSS, and we can more accurately answer your question. Or, better yet - read the CSS specificity article, and you'll know how to alter the selector yourself!
I'd say the simplest way is to use class and id. Like so:
table.outer { some: style; } /* class */
table#inner { some: style; } /* id */
But as you said, AVOID classes, then perhaps call the table nested within the table like so:
table { some: style; }
table table { some: style; } /* override outer table */
Related
In very simple html/css, I have my menu in a <table id="menu">. The menu has no border, however I would like all the other tables in my blog to have borders.
I made it work this way:
#menu, #menu th, #menu td {border: none; color: red}
table, th, td {border: 1px solid black;}
However this is not very robust. If I add something else to tables I might forget to 'reset' it in #menu. Is there a way to force all properties in #menu so that I don't have to override one by one anything I would add to table, th, td {...}?
I tried the :not() selector but it doesn't feel robust either, I would rather specify what I want for menu on the #menu {...} line, not elsewhere. Let me know if that makes sense or I can reformulate
I think that I understand now. I was searching for a way to unset all values for a css class and came across this page: Reset/remove CSS styles for element only
It tells us that we can do something like this to achieve what you want:
#menu, #menu th, #menu td {
all: unset;
color: red;
}
table, th, td {
border: 1px solid black;
}
Notice how I added the all: unset; and removed the border: none;
This should reset all the styles for elements with that id, but make sure to put your other styles AFTER the all: unset, or else it will unset the styles you just wrote. Hope this helps!
Maybe using classes instead of id's.
If you use a class you can apply a css rule to all elements that have It
So for example to your table you can use
.custum-table
The prevoius class Will apply css styles to all elements
And finally if you wanna apply another css rule you can add another class to your element in this way
Another html file
.custom-table__no--effect
Previous class with BEM Will apply css styles to only one element for example table element
I have a table that shows and hides certain rows based on some data, so I was hoping to do the row style with CSS, a la:
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
However, it seems MvcRazorToPdf can't apply these styles correctly to a table. Does anyone know how this can be done or why it won't work with MvcRazorToPdf?
I've seen a few other questions about first child stuff but I can't seem to be able to get anything to work.
I have a table and want the first column to be all bold but the rest of the text to be normal.
About the tables I have:
div.article table{
/* formatting stuff */
}
div.article table th {
/* formatting */
}
div.article table tr {
/* more formatting. I've got a funky looking table. */
}
So then I try:
div.article table tr:first-child {
font-style:bold;
}
but it doesn't seem to have an impact.
Any ideas? I suspect it's something really small but I'm overlooking it.
You should use:
div.article table tr td:first-child {
font-weight: bold;
}
With the way you have it set up currently you are specifying that the row which is the first-child of the table should have its font-style set to bold. There are 2 problems there, you should be using font-weight instead of font-style, and you are wanting to target all td's which are the first-child of their row.
I've been using the following jquery code to style table rows.
$('tr').hover(function() {
$('tr td').css('color', '#ffffff');
$('tr td a').css('background', '#0080ff');
});
$('tr').mouseleave(function() {
$('tr td').css('color', '#222222');
$('tr td a').css('background', '#ffffff');
});
This works just fine but I'm wondering there's a CSS alternative. It would seem like a much more efficient approach than what I have right now but I really don't know a whole lot about CSS.
The problem with using the following CSS
tr:hover {
color:#ffffff;
}
is that the anchor tags still remain the same color when the table row is hovered on. Are there any ways via CSS that hovering on a table row could trigger the anchor tags nested inside of the given table row to change colors?
It sort of depends on your other CSS selectors, but this will probably work:
tr:hover td {
color: white;
}
tr:hover td a {
background: #0080ff;
}
td:hover a {
your link style on row hover
}
I have a table structure, where I can't access jsp file to add class files. I have to manage it through CSS. In this case, I need to apply background color for first table all th's. Not to nested table th's. How can we do this with CSS? Example : http://jsfiddle.net/qdDnJ/
As per i understand may you can write like this:
tr th{
background:red;
}
tr table th{
background:none;
}
Check this http://jsfiddle.net/qdDnJ/2/
Distinguish first table's th from the second table's th.
Edited after comment:
See here, http://jsfiddle.net/qdDnJ/25/
I have assumed that div is parent container of first table.
You can replace it with table's parent.
e.g. If body is parent, css should be,
body > table > tbody > tr > th {
background-color:red;
}
You could do this:
table th:first-child {
background: red;
}
table table th:first-child {
background: none;
}
I would just give the outer table a class and use this:
table.class-name th:first-child {
background: red;
}
Every body tried many things to achieve the target as per the question.
but as per the HTML we can just write the following css and avoid child th to get background-color..
in this solution we do not need any id and class or any thing accept the .gap class. Even if this class is not there we can apply the css.
check the demo
HERE is the CSS with .gap class
table th {background-color:red;}
table td.gap tr th {background:none;}
HERE is the CSS without .gap class
table th {background-color:red;}
table td tr th {background:none;}
The simplest way I know is to use the child selector
#yourtableId > tbody > tr > th { background: red; }
Demo