I have a table in a div, with IDs of table1 and div1.
I want to set the CSS for the cells in the table.
What does the CSS block look like? Like this?:
div1.table1{
}
#table1 td {...}
The pound means that what follows is an id, in your case table1. the td that follows means that "any td that is a descendant of #table1". Here is a pretty good tutorial.
EDIT: for the most efficient selector use #table1 > tr > td {...}
If you're trying to be as specific as possible:
#div1 #table1 tr td {
}
If not, you could get away with
#table1 tr td {
}
or even
#table1 td {
}
The later two will style any element with the id of 'table1' (not just an element with the id of 'table1' inside of an element with the id of 'div1'
Assuming html:
<div id="div1">
<table id="table1">
...
</table>
</div>
Use CSS:
#div1 #table1 td {
...
}
That will let you style the cells.
#div1 #table1 td{ }
because
# = ID
. = class
nothing = tag
In my opinion better way to do it would be ...
#div1 table td{ }
<div id="div1"><table></table></div>
You don't really need to create a new id for the table. It kind of depends whether you have more than one table in your div and if the tables are going to be different, but from your question I'd say this would be better.
If the IDs are table1 and div1 then you use the # sign to indicate that an "element" is being used (#div1, #table1). if you have marked them as classes, then use a period (.div1, .table1). IDs should be used once per page, classes can be reused over and over. In this instance, all you may require is #table1 td { }
Any of these will work:
#table1 tr td{
}
#div1 #table1 tr td{
}
#table1 td{
}
#div1 tr td{
}
#div1 table td{
}
You use spaces to separate the tags.
or alternatively, if your table is generated by some server-side script, you can also add CSS classes explicitly to the table rows like
<table...>
<tbody>
<tr class="odd">
<td>..</td>
<td>..</td>
</tr>
<tr class="even">
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
It depends on how precise do you want to be. CSS stands for Cascading Style Sheets so this following rules will cascade down to the most specific one from top to border:
/* all td in the page */
td { color: '#aaaaaa' }
/* all td in table with id table1 */
#table1 td { color: '#bbbbbb' }
/* all td in a div that contains this table with this id */
div #table1 td { color: '#cccccc' }
/* all td in this specific div that contains this specific table */
#div1 #table1 td { color: '#dddddd' }
#div1 #table1 td
{
...
}
EDIT: Corrected - I read too fast - I usually use class instead of ID so I used . out of habit.
Related
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
I have html like this below - and do not have access to modify it beyond setting a class or id on the first "td" in the row. Is there a way to target the entire row, or get both "td" elements in the row?
<tr>
<td width="50%" valign="top"><font class="subheader"><span class="eField">membershipCode</span> </font></td>
<td width="50%" valign="top"><font class="text">Testing </font></td>
</tr>
Part of this goes out in Email, so I'd rather avoid Javascript if possible. I tried this css, but no luck so far:
<style type="text/css">
td span.eField {
display:none;
}
td span.eField+td {
display:none;
}
</style>
Is there any way to do this using pure css?
NOTE: I only want to target rows containing the "eField" elements - I can hide the element itself, but can't get the next or the entire row. So I don't want to hide all rows in the table, just a select few.
Thanks,
-Jim
Yes indeed You can do it using normal css like the following fiddle demonstrates:
using the following two methods
table tr td
or
table tr
http://jsfiddle.net/qLynh5n1/
I do not quite understand what you're trying to do.
But can't you just use:
tr,
td {
css:css !important;
}
?
I understand you are try to select the parent of the span with class eField.
CSS has the descendant selector but not the other way around.
a > img { border: none; } - valid - all img directly under a
a < img { border: none; } - not valid - all a directly above img
Refer this link
I'm not well experienced in CSS, could somebody tell me how could I override styling so that a cell called "Existing Price Breaks" retains it's left border? Similarly the one below would do the same, splitting the content. But the rest of the header should stay without them as it is now.
Here's the fiddle: http://jsfiddle.net/kacpr/YkL5j/2/
That's the part I would like to override on the 'cell' level:
.table > thead > tr > th, .table > thead > tr > td {
border: 0;
}
It doesn't seem the proper way of using the CSS selectors, but here is a possible solution (there's no class for the cell, so we use ":nth-child()" as example:
.table > thead > tr > td:nth-child(4) {
border-left: 1px solid #ff0000;
}
http://jsfiddle.net/YkL5j/3/
If you need backward browser compatibility, then you may need to assign a class to the selected cell: .existingPriceBreaks {}
A better way for using CSS selectors could be:
.table tr td:nth-child(4) {}
.table tr td.existingPriceBreaks {}
...except you plan to use nested tables for some reason...
You could use a class e.g. leftBordered to override the common border definitions like:
/* in html */
<tr>
<td>Currency</td>
<td style="font-weight: normal;">EUR</td>
<td></td>
<td colspan="2" class="leftBordered">Existing price breaks</td>
<td colspan="3">New price breaks</td>
</tr>
/* must be applied to all td-fields, that need to be changed */
/* in css */
table > thead > tr > td.leftBordered {
border-left: 1px solid #ccc;
}
see fiddle for working example here: http://jsfiddle.net/YkL5j/5/
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
Good afternoon in my timezone.
I have a table with four tr and each tr has four td.
I want to apply different width's to each td.
For example I want the following:
<tr>
<td width="20%"/>
<td width="25%"/>
<td width="10%"/>
<td width="45%"/>
</tr>
Is there a way to have just one class that is applied to the tr and inside that class I give a width to each td? Or do I create four different classes each with different width's ? Something like
.firstTD{
width:20%;
}
.secondTD{
width:25%;
}
.thirdTD{
width:10%;
}
.fourTD{
width:45%;
}
This should be supported in internet explorer 6 too.
Thanks in advance.
Best regards
You can use the adjacent selector:
.mytable td{
width:20%;
}
.mytable td+td{
width:25%;
}
.mytable td+td+td{
width:10%;
}
.mytable td+td+td+td{
width:45%;
}
Like that you wouldn't need any classes, but I would give the table itself one, or all your tables would inherit those styles, obviously.
You don't need to use multiple classes. The adjacent selector has you covered.
td { width: 20%; }
td + td { width: 25%; }
td + td + td { width: 10%; }
td + td + td + td { width: 45%; }
If you want each td to be different widths you'd need to create different classes. You can set a width on the tr but it will divide up the cells into equal parts or enough to hold the data in them.
You can use define a class in the tr and use :nth-child(n) selector to give each td a separate width
<tr class="myrow">
<td />
<td />
<td />
<td />
</tr>
css can be provided as follows,
.myrow td:nth-child(1){
width:20%;
}
.myrow td:nth-child(2){
width:25%;
}
.myrow td:nth-child(3){
width:10%;
}
.myrow td:nth-child(4){
width:45%;
}
But this will work with the browsers that support CSS3. It will be supported from IE9 onwards.
you can use a single class applied to the table (or tbody) and use
.yourclass td { /* first td */ }
.yourclass td + td { /* 2nd td */ }
.yourclass td + td + td{ /* 3rd td */ }
.yourclass td + td + td + td { /* 4th td */ }
Consider that a rule written in this way will be also applied to all of the following rules, so use this only to set and override specific properties.
If you don't need to supprt older IE version you can also use nth-child
example
.yourclass tr td:nth-child(2) { /* 2nd td */ }
Note: the class is not strictly necessary but if you have multiple tables, this style will affect only elements you want style in this way.
The only way to do it is as you suggested, creating a CSS class for each TD. In any case, the TD's class attribute would be used only for the first row, as the subsequent ones will inherit the width value.