I rewrite some css for a big site. There's lot of content and the content often differs.
I'm somehow stuck on css tables.
My new tables should have rounded borders. Thankfully, I can use CSS only (it can graceful degrade down to IE7), so I will use CSS only.
Tables onsite differs. Some has table header, some doesn't.
As we all know, border-radius doesn't work on table itself. It has to be a table cell argument.
Is there any possibility to write the CSS, so a browser would recognize if the table has thead (and then set border-radius for "table thead tr:first-child th:first-child"), and if not border-radius would be set for "table tbody tr:first-child td:first-child")?
Quick simple shot I tried doesn't work - "table tr:first-child td:first-child" - as I should assume if I would think about it - it sets border-radius for both "thead th" and "tbody td".
If you have any possible solution I'd be grateful. CSS3 only solutions are fine enough for me.
You could use jQuery to count the th tags and set a class on the table if it found any...
var thCount = $("#theTable tr th").length;
if (thCount > 0){
$("#theTable").addClass("roundCorners");
//adds a class to the table so you can make round corners
}
This example assumes you already have some form of ID/Class on the table, just need to change as necessary and use your CSS.
Related
I've been using 'border = 1' in my HTML, which looks fine, but I realise it would be better to use CSS, so I created a basic border class, like so...
.basicborder table, .basicborder th, .basicborder td {
border: 1px solid black;
}
The borders appear around the th and td's but not around the outside of the table itself. Have I done something wrong?
CSS looks fine to me, but you can better use:
table.basicborder, th.basicborder, td.basicborder{border: 1px solid black;}
So, the selector starts with the least specific selector (the HTML element, instead of the class).
But it should already work fine, if you have linked your HTML properly. Do your table, th and td elements have a class="basicborder" attribute each?
edit:
If i comprehend correctly, this would be the best solution.
You make a basic style for all 's with just table,td,th{ etc...
Then you add to the ones with a different style a class, lets stay differentborder.Now you make a CSS saying the following: table.differentborder, .differentborder td, .differentborder th{ your style }
This selects your tables with the class, and all td's an th's where a parent has the class differentborder.
For more fun with CSS selectors you can look on the W3Schools CSS Selector Reference
I am working on a page where I have to show a scrollable table. Please find it in the below jssfiddle link :
jsfiddle
Problem is the actual page where I am including the above html table and the associated css, that page itself has other layout on it and a different css file for that.
I guess my above css file table , td and body is interfering with the other css used in that page and
destroying the display, Can anybody please help me to change the css in the jssfiddle link above
so that everything is put into unique class/id and used appropriately in the html. So that no matter how are the remaining page layout , other widgets and layout do not overlap with my table.
My table should remain intact in terms of its look and feel and scroll property.
Apologies, I am not an expert of HTML/CSS
Even if someone can explain me what is the purpose of the first 4 lines
* { } and then
body { },
table { } ,
td { } , will be great help. I think those should put under appropriate class and then used in the html. Please provide some guidelines how can I do that.
Thanks
*{}
Applies to every element on the page. You still want what is there, but you want it to only apply to every element within your scrolling tables, so I changed it to :
#scrollTableContainer *{}
I move'd your body's font declaration into div#scrollTableContainer
And then I prefixed your table{}, td{}, td:first-child{}, td:first-child + td + td, td:first-child + td + td + td and td:first-child + td + td + td + td with the #scrollTableContainer ID.
The one thing I didn't decide for you was what to do with your font-size in html{}. I am guessing you will still want that. My suggestion would be to decide on a font size and merge it with the declairation in div#scrollTableContainer
And here is the result : http://jsfiddle.net/trex005/6q1avq7f/1/
I have created a sample page with a table. Should the page get deleted in the future, here's the code on Pastebin.
I want to highlight table rows on hover. It works for normal tr but it doesn't work for tr.alt (odd rows).
Code for highlighting:
tr:hover,tr.alt:hover
{
background: #f7dcdf;
}
Code for making odd rows different colour:
tr.alt td
{
background: #daecf5;
}
Any ideas how this could be fixed?
Make sure the rule for the hovering effect is below the .alt color as this overwrites previous rules or add !important
tr:hover,tr.alt:hover
{
background: #f7dcdf!important;
}
Also note you are applying the background color for the .alt rows to the cells (td's), this color will appear "in front" of the tr background so change your rules so both are for cells or for the whole rows
The problem is that tr.alt td is more specific then tr.alt:hover according to css cascading rules.
The easy way would be to make sure that the :hover rule becomes more specific then the .alt rule. This can be done by changing tr.alt td to tr.alt
As a sidenote, are you aware that you do not need the .alt class to target the odd rows? There is a very usefull :nth-child() pseudo class that can take care of that for you. You can read all about it here: http://css-tricks.com/how-nth-child-works/
I took the liberty to apply this to your sample: http://jsfiddle.net/3tV9b/
Note that all I did was change tr.alt td to tr:nth-child(2n+1) and removed all selectors that had the .alt class.
The big advantage of this technique is that you do not need to bother about maintaining the HTML, you can just add and remove rows as you wish, and the alternating color should keep working.
Disadvantage is (off course) the support in IE, but I think this is not really a loss of functionality, and well within the boundaries of graceful degrade.
What's a good way to add some space between html table rows using css? Should work in all browsers including IE6. Should use id or class so it doesn't affect every table in the site. Prefer to declare the css at the table level. Don't want to use empty tr's to simulate a blank row. css should not affect any inner tables.
Logically I tried this but margins don't work with tr's:
.someclass tr
{
margin-bottom:20px;
}
You could use:
.someclass td {padding-bottom: 20px;}
It's unfortunately not that intuitive but it works on IE6 and all the other browsers. You can also do it with a border:
.someclass td {border-bottom: 20px solid white;}
Edit
To exclude an inner table you could use:
.someclass td td {padding-bottom: 0px;}
border-spacing is the right way to go, but doesn't fulfill all your requirements.
Still, you could use it in combination with a little browser-detection: if IE < 8, use a little javascript to add some cellspacing.
Add following rule to tr and it should work
float: left
Sample (Open it in IE9 offcourse :) ):
http://jsfiddle.net/zshmN/
<tr><td><br></td></tr>
The above creates a gap between 2 rows with the <br> tag
If you don't want the border to be too big/thick (with border-spacing), you could use padding on the td.
http://jsfiddle.net/zzJ9Z/
I have a table whose tds are created dynamically. I know how to get the first and last child but my question is:
Is there a way of getting the second or third child using CSS?
For modern browsers, use td:nth-child(2) for the second td, and td:nth-child(3) for the third. Remember that these retrieve the second and third td for every row.
If you need compatibility with IE older than version 9, use sibling combinators or JavaScript as suggested by Tim. Also see my answer to this related question for an explanation and illustration of his method.
For IE 7 & 8 (and other browsers without CSS3 support not including IE6) you can use the following to get the 2nd and 3rd children:
2nd Child:
td:first-child + td
3rd Child:
td:first-child + td + td
Then simply add another + td for each additional child you wish to select.
If you want to support IE6 that can be done too! You simply need to use a little javascript (jQuery in this example):
$(function() {
$('td:first-child').addClass("firstChild");
$(".table-class tr").each(function() {
$(this).find('td:eq(1)').addClass("secondChild");
$(this).find('td:eq(2)').addClass("thirdChild");
});
});
Then in your css you simply use those class selectors to make whatever changes you like:
table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }