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.
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
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'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/
If I am targeting a specific row, say the first one in a table, and want to change font color, I can do this
.mytable tr:first th {
color: red
}
But how do I add a hover property to the same row? This won't work, would it?
.mytable tr:first:hover th {
color: green
}
Can you put just the first row in a thead container?
.mytable thead:hover {
color: green
}
<table class="mytable">
<thead>
<tr><th>hello</th></tr>
</thead>
<tr><td>goodby</td></tr>
</table>
What about
.mytable tr:first th:hover {
color: green
}
?
Surely you use first-child and not just first? Then apply the hover to the first-child. You don't need to specify th as it will propogate through anyway.
Check this DEMO
.mytable tr:first-child { color: red; }
.mytable tr:first-child:hover { color: green; }
.mytable tr { color:blue; }
However if you are looking to specify any row, other than the first-child, you might have to look at some javascript, or maybe the use of nth-child but that would rule out < IE8 compatibility.
How about this:
.hoverstate:hover {
color: green;
}
with HTML like this:
<table>
<tr><td>1</td><td>2</td></tr>
<tr class="hoverstate"><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
?
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.