I have two table in two div, each div having a different class. I would like to apply a padding to the cells of one of the tables only.
(the code below is also at JSFiddle)
The HTML part:
<div class=tight>
<table>
<tr>
<td>hello</td><td>world</td>
</tr>
</table>
</div>
<div class=wide>
<table>
<tr>
<td>bonjour</td><td>tout le monde</td>
</tr>
</table>
</div>
The CSS part:
td {
background: green;
color: white;
padding: 10px;
}
This applies padding to all cells. I tried to be specific though various combinations of
td .wide { ... }
td, .wide { ... }
td.wide { ... }
but I failed to find the right one.
Is it possible to set a property for an element, but which is a child of a specific div (specific = having a specific class)?
For example, if you want to apply padding on < td > of the first div, use:
.tight td{
padding: 10px;
}
If you prefer to exclude one of the class, you can also use :
div:not(.tight) td {
padding: 10px;
}
Use some thing like this .wide td
Related
Lets get straight to the point, I have created this example to better get my point across:
Demo Here
HTML:
Table 1
<table class="testClass">
<tr>
<td>Inner table
<table>
<tr>
<td>Hello</td>
<td>Testing testing</td>
<td>Bye</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<br />
<br />Table 2
<table class="testClass">
<tr>
<td colspan="3">stuff</td>
</tr>
<tr>
<td>Left</td>
<td>Middle</td>
<td>Right</td>
</tr>
</table>
CSS:
table {
border: 2px solid red;
width: 100%;
}
td {
border: 2px solid blue;
}
/* Relative CSS */
.testClass tr:last-child td:nth-child(1) {
width: 15px;
}
.testClass tr:last-child td:nth-child(2) {
width: auto;
}
.testClass tr:last-child td:nth-child(3) {
width: 15px;
}
So we have 2 tables, both with the same class. Table 1 has a table within it where as Table 2 does not.
The problem I'm finding with this is using the CSS I have created I am unable to stop the styles for .testClass from affected the child table (Inner table). I was thinking that :not() could be used but am unable to find a solution using it tho I feel this shouldn't be that hard.
Is it possible to only affect the parent within the styles from the parent getting to the child table?
Note: The CSS can only be changed not the HTML. CSS3 can be used!
I hope this made some sense, if I need to make it clearer please leave a comment.
Select the first level child and apply it.
.testClass > tbody > tr:last-child > td:nth-child(1) {
width: 15px;
}
.testClass > tbody > tr:last-child > td:nth-child(2) {
width: auto;
}
.testClass > tbody > tr:last-child > td:nth-child(3) {
width: 15px;
}
DEMO
maybe this way : http://jsfiddle.net/urryfof5/7/
Basically you call the last-child table from the body and add > so it won't affect nested tables inside:
body > table:last-child (and follow it with your css)
You could add style-declarations like
table table { border: none; }
to override styles from the parent table-declaration. This way, no nested tables will have the border. The same thing applies for the tds.
Another solution would be:
table:not(.testClass) {
border: 0px none;
}
which removes the border for all tables that do not have the testClass applied. I tested and saw this work (in another version of the below Fiddle).
Here's a Fiddle with your code with two additional declarations, removing the borders for the inner table:
http://jsfiddle.net/erlingormar/bk6m4w5d/#base
I have a table element that has also a table inside in one cell. (Jquery UI calendar is inside actually)
How can I style only the parent?
body table tr td:nth-child(2n) {
background-color: red;
}
does this: (fiddle here)
but I would like only the outer cells (number 2 and 5) to be selected.
Use the child (>) selector and add a tbody element in the selector (no HTML changes needed):
body > table > tbody > tr > td:nth-child(2n) {
background-color: red;
}
jsFiddle example
This works because it specifically only selects the outer table.
Tested successfully in Chrome, FF, and IE.
Add the following CSS:
table table tr td:nth-child(2n) {
background-color: transparent;
}
This selects the cells, but only if they have two table parents, and sets their background-color to transparent.
JSFiddle
This works, just reset the background for the inner table.
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr>
<td>4</td>
<td>5</td>
<td>
<table class="inner">
<tr><td>6</td><td>7</td><td>8</td></tr>
<tr><td>9</td><td>A</td><td>B</td></tr>
</table>
</td>
</tr>
</table>
table {
border-spacing: 2px;}
td{
border-spacing: 2px;
border: 1px solid black;
}
body table tr td:nth-child(2n) {
background-color: red;
}
body .inner tr td:nth-child(2n) {
background-color: white;
}
Fiddle
I have two styles, one which is at element level 'td' and another which is at class level '.specialTable td'. And I've run into some problems as the class level style is inheriting all the 'td' style properties if I have not specified them again.
I have a CSS style
td
{
background-color:black;
}
and then I have
.specialTable tr:nth-child(even) {
background-color: white;
}
and
.specialTable td
{
background-color:none;
}
What happens here is that even though I've asked.specialTable td to have no background, it inherits the black background from element style 'td' and this causes my element style 'tr' to be blocked out, because cells are on top of rows.
I am trying to set alternating row style to my table. Please help me with how I can stop the original 'td' element style from getting in the way.
Here is the fiddle:
http://jsfiddle.net/PIyer/phADs/1/
you have a type in your css, but im not sure if that is the problem
specialTable tr:nth-child(even) {
background-color: white;
}
should be
.specialTable tr:nth-child(even) {
background-color: white;
}
aslso background-color:none is not valid css , maybee background-color:transparent
none is not a valid property for the background color. Try this:
.specialTable tr {
background-color: black;
}
.specialTable tr:nth-child(even) {
background-color: white;
}
Or you might use in your example just
.specialTable td
{
background-color: transparent;
}
This should let the white shine through.
You could simplify things, by using basic CSS overriding.
Let's say you have this:
<table class="specialTable">
<tr>
<td>This is an odd row</td>
</tr>
<tr>
<td>This is an even row</td>
</tr>
<tr>
<td>This is an odd row</td>
</tr>
<tr>
<td>This is an even row</td>
</tr>
</table>
And your default <td> style is this:
td {
background-color:black;
color: #FFF;
}
To make alternating (zebra) styling to .specialTable, you can simply do this:
.specialTable tr:nth-child(even) td {
background-color: blue;
}
This will override the original CSS defintion for <td> for all <td> tags within an even <tr> tag.
Check out a working example here: http://jsfiddle.net/rh5vV/
It's important to note that the nth-child sudo selector does not work in versions of IE8 and lower, so you may want to apply a class of .even to your even <tr> tags.
Try this out
.specialTable tr td {
background-color:transparent;
}
using background none is incorrect, use transparent instead
http://jsfiddle.net/RBY2v/1/
You can use background-color:transparent; or depending on background:none;:
.specialTable td {
background-color:transparent;
}
I am new to CSS and am working on an intraweb application which will render in modern standard browsers (IE support is not necessary). I have spent much time looking for answers on this and other sites, only to find the answers "It's impossible because..." or "Do this hack instead...." but I just won't accept that.
Here's what I need:
A table with one header row and multiple body rows;
A solid border under the header row;
Vertical white space (padding? margin? spacing?) between the header row and first body row only;
Body rows being highlighted on mouse hover.
I couldn't get (2) to be visible until I styled the table border-collapse: collapse;. Fine. But (3) apparently only works with border-spacing, and only on <td> elements (not <tbody> or <tr>), which is anyway disabled by the collapse. Meanwhile, for some unknowable reason, margin's are not recognized for <thead>, <tr>, or <th> elements, but having padding-top on the first row of the body's <td>'s works, except it doesn't, because when I mouse over that first row, the whole margin-which-is-implemented-as-padding gets highlighted as well, which nauseates me.
I know having a few pixels of margin between a table's header and body is like a really out-of-left-field, why-would-anyone-ever-want-that thing to want, but what should I tell you? I'm no cheap date.
Please be as brutal and condescending as you can in pointing out my stupidity in understanding CSS, provided you also either 1) say how to do it without changing the markup (thereby preserving the separation of presentation from content CSS was evidently designed to encourage) or 2) agree with me that CSS is weird.
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
</body>
This would fix your problems without any hacks and ofcourse its completely possible. The updated code(only CSS changes) is shared below with explanations.
Problem 3 :
We can make use of the CSS selector :first-of-type(targeting only the first row) in succession with all the <td> under it and use attribute padding-top. Simple :-)
<tr> cannot have margin values by default. Again hacks are available(above mentioned answers) but I wouldn't go there as you don't want it.
And also since we have used padding, the hover effect would work perfectly on the entire row content. Hence getting the desired change without any markup changes.
Problem 2 :
We can remove the attribute border-collapse from table and instead apply the border on the <th>tags (let the border-spacing: 0 remain or the border would be discontinuous). Simple again :-)
Problem 1 and 4 are already covered. No markup changes as you wished. Here is the Fiddle
So the updated style code would look like
<head><style>
table {
border-spacing: 0;
}
thead tr th {
border-bottom: 4px solid #123456;
}
tbody tr:hover {
background-color: #ABCDEF;
}
/*** added ***/
tbody tr:first-of-type td {
padding-top: 10px;
}
</style></head>
Okay, in order:
1: A table with one header row and multiple body rows:
This is what the elements thead and tbody were designed for:
<table>
<thead>
<tr><th>heading one</th><th>Heading two</th></tr>
</thead>
<tbody>
<!--
all body table rows in here
-->
</tbody>
</table>
There's also tfoot (see references), which, if used, must be declared before the tbody element.
2: A solid border under the header row:
thead tr th {
border-bottom: 2px solid #000;
}
Select the th elements within the thead element, the tr selector is probably unnecessary here, and, while it does no harm, can be simplified to: thead th {/*...*/}.
3: Vertical white space (padding? margin? spacing?) between the header row and first body row only. padding, it seems, cannot be applied to the thead, tbody or tr elements, since they're, essentially (I suppose) 'non-visual', so it has to be defined on the td elements. This does, on hover, mean there's a disconcertingly large 'row' occupied by the first row during the :hover (see the next part).
tbody tr:first-child td {
padding-top: 1em;
}
4: Body rows being highlighted on mouse hover.
tbody tr:hover td {
background-color: #ffa;
}
While you can apply a :hover to the currently-hovered cell, and later siblings (with the general sibling ~ combinator) you can't apply a style to siblings that appear previously, so here we're styling the td elements in response to the :hover of their parent tr.
The reason that we have to style the td (rather than directly change the background-color of the tr is because td elements don't typically default to a transparent background, which means the changed/highlighted background-color is 'hidden' by the background-color of the td elements.
JS Fiddle demo.
References:
Table row-groups, thead, tbody, tfoot elements.
In order to apply margin to the first table row you need to make it display: block; first, as margin can only be applied to block elements (including inline-blocks)
But here is another solution using positioning:
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
position: relative; /* Add positioning */
margin-top: 40px; /* Add some margin */
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
thead {
position: absolute; /* Position this element absolute */
top: -40px; /* And move it up */
}
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
<p>Thats how its done!</p>
</body>
Basically we apply position: relative; to the table and position: absolute; to thead.
Now you can move the thead inside the table using top, bottom, left and right properties. We are going to move it up by 40px using top: -40px;
We do not apply position: absolute; to tbody, because if we do - this element will no longer 'strech the page' or in other words all the following elements will ignore its height. (try doing it and see what happens to the following block)
The only thing we got left - is to apply some margin-top to the table itself, moving it down (as we moved the thead up)
Yes, CSS can seem a bit weird from time to time, but this is mostly because we forget how some page elements are supposed to be handled (namely tables and their child elements)
What about adding an empty row at the beginning like
<tbody>
<tr><td> </td></tr>
<tr><td>blablablabla</td></tr>
And use this CSS
tbody tr:first-child td{
padding-top: 15px;
}
tbody tr:first-child:hover{
background-color: transparent;
}
So the padding will be added to first row and first row won't highlight on mouse over? :)
All your 4 points are covered there-
First download metro ui css here http://metroui.org.ua/
Include its two css file 1. metro-bootstrap, 2.metro-bootstrap-responsive into your project.
Register that in BundleConfig.
bundles.Add(new StyleBundle("~/Content/css/metroUI").Include("~/Content/css/metro-bootstrap.css",
"~/Content/css/metro-bootstrap-responsive.css"));
Now use class "gr-items" for table
< table id="divAllActivities" class="gr-items">
<thead>
<tr><th><span>Comment</span></th></tr>
</thead>
<tbody>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
</tbody>
Hope this is what you want.
I have this table with the following CSS formatting:
<table cellspacing="2">
<tbody>
<tr>
<th>Name</th>
<th>Area</th>
</tr>
<tr>
<td>${it.conference}</td>
<td>${it.accepted}</td>
</tr>
</tbody>
</table>
And CSS:
table {
padding-left: 10px;
width:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
}
th, td {
padding:5px 10px;
}
th {
color:#666666;
border-top:2px solid #b7ddf2;
background-color:#ebf4fb;
}
How can i apply individual css modifications for each line (for example, I would like to change the color of 'Name', without messing up with the other lines formatting, which means, only modify that one. Is that possible to do?
Are you looking for something similar to the nth-child CSS pseudo-class?
If you want a more fine grain control over each individual one you might want to consider applying classes to them and styling them differently.
Edit: Here are a few examples of nth-child.
With a CSS only method you'll need to add some class to the line you would like to style, like this:
<table cellspacing="2">
<tbody><tr>
<th class="color1">Name</th>
<th>Area</th>
</tr>
<td>${it.conference}</td>
<td>${it.accepted}</td>
</tr></tbody>
</table>
and then style it:
.color1 {
background-color: (somecolor);
}
To style "Even" & "Odd" rows then use CSS3
like:
tr:nth-child(odd){
background:#999;}
tr:nth-child(even){
background:#f5f5f5;}
If you can get away without support for IE 7 and 8, you can do...
th:nth-of-type(1) {
color: #c00;
}
Otherwise, add a class such as th class="whatever" and then...
th.whatever {
color: #c00;
}
See a live demo:
http://jsfiddle.net/GFPgB/
If you want to apply CSS style based on the content of the element, that is not possible with CSS. If on the other hand you want to apply CSS styles based on their position, you can use the :nth-child(N) pseudo classes. For example
th:nth-child(1) /*for name*/
{
color: blue;
}
th:nth-child(2) /*for area*/
{
color: red;
}
apply a class to whatever element you want, and CSS style it. http://jsfiddle.net/robx/wzXAJ/
IE: apply <th class="name">Name</th>.
I know this is an old answer, but I made a fun example in Jquery, and maybe it will help somebody with their question.
JSFIDDLE
It'll get all <p> elements from the document and will loop through them, as jquery does that, it will add a CSS style to every <p> element on the page.