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
Related
I have a wordpress site and all tables seem to be borderless as far as I can see.
When I check it with Firebug I can disable css initialization for <table> element and design seems to be OK. Firebug tells me the CSS code is set in theme's style.css file. I open the file and check the content but there is no such line.
After this I choose a worse way to manually set the style attribute of my <table> HRTML element as follows. I also apply !important directive to override anything.
As far as I can know the style attribute of an HTML element overrides all CSS and previous (inherited or not inherited) style declarations. Also the !important also makes it undestructable. I have used both I still can not make it work.
What am I possibly doing wrong and how can I fix it?
Regards.
P.S. : You can check the faulty content # http://pmiturkey.org/hakkimizda/uyelik/
The table as the bottom of the content.
OK, I played a little with firebug in your website here and had to do a few things:
1) Remove border="1" in that same table
2) Change from style="1 border #000 !important;" to style="1px border #000;"
These changes solve your problem.
EDIT
In order to draw borders around each cell of the table instead, proceed as follows:
1) Remove the table's style attribute
2) In your css file, add the following:
th, td {
border: 1px solid #000;
}
This should add borders around each table cell of yours. Hope it helps!
Well for starters you aren't adding a color to your border border: 1px solid red;. The borders are probably being removed in a css reset. You can add css to the bottom of your styles.css file and that should override any reset.
Also.. are you wanting a border around the table, or a border between the table rows? You might want to specify what exactly you want.
I have the first row of a table styled as follows:
.Table1 tr:first-child td { ... }
I also want a hover style on part of this row, and I've tried these 2 as the next rule, but neither of them works:
.Table1 tr:first-child:hover td { ... }
.Table1 tr:first-child td:hover { ... }
They do both partially work - some td cells in the row have no content, and have a class of emptyColumn, and these cells do have the hover styling applied to them (but only if the styling is !important). However, the cells which do have text content are not styled.
From my (very) limited understanding of specificity, if the first rule actually works, then surely the second rule should also work, since it's more specific? Is there something else that could stop it working?
However, what I actually need is slightly different from this. I only want the hover to work on certain td cells in the tr, and I've given these cells a class of colHeaderButton:
td.setAttribute('class', 'colHeaderButton');
I can't find any way to apply the hover style using the class name - I've tried various combinations such as
.Table1.colHeaderButton tr:first-child td:hover { ... }
but I can't get any of these to work. Thanks.
The td is a member of the class, not the table.
.Table1 tr:first-child td.colHeaderButton:hover
I'm building a simple website for a friend of mine using wordpress. In a page I now want to make a simple rectangle and put some info in it. Since I learned html back in the 90's I still use a table (with one td) to do this. Since I want the table border to disappear I created the table like so:
<table border="0">
<tr><td>some content</td></tr>
</table>
Unfortunately, the border still appears (see here for the page I work on).
Does anybody know how I can get rid of this table border?
You are having this rule in your stylesheet style.css Line 1071 which needs to be removed
th, td, table {
border: 1px solid #DDDDDD;
}
Note: This is an element selector, will apply to all the tables in your website.
You've that table inside a div with class post-entry so better you can override the styles using the below selector
.post-entry * { /* '*' will select all element inside .post-entry so be cautious */
border: 0 !important;
}
And if you are having post-entry for other elements too, explicitly specify the elements instead of using *
.post-entry table, .post-entry th, .post-entry td {
border: 0;
}
Tip : Use firebug, will save you from asking less questions and wasting less time in debugging your CSS, HTML and JS
I am trying to create a data table, where I am facing few issues with styling.
1) I am trying to apply alternating row to TR which is not firing.
Is there any way to apply the alternating style without passing the class to all the TD's
with in each TR..?
2) Colgroup is working in IE8, particularly with alignment
(cols=A&SI Capital Allocation, Cap Var, A&SI Expense Allocation, Exp Var)
Is there any way to apply fix this issue
Here is the code: http://jsfiddle.net/yvJ75/1/
You can use CSS3 pseudo-classes nth-child(odd) and nth-child(even).
I have updated the code here: http://jsfiddle.net/yvJ75/12/
These are the changes in the CSS
/*
.bg-oddrow {
background-color:#fbfcfb !important;
}
.bg-evenrow {
border-bottom:1px solid #dadada !important;
}*/
table tr:nth-child(odd) td{
background-color:#fbfcfb !important;
}
table tr:nth-child(even) td{
border-bottom:1px solid #dadada !important;
}
Is there any way to apply the alternating style without passing the
class to all the TD's with in each TR..?
Yes - you can apply the class like <tr class="even-row"> and use a css selector like tr.even-row td to apply background to <td>. This approach works in all browsers. You could even use tr:nth-child(odd) and tr:nth-child(even), but this are css3 pseudo classes.
Colgroup is working in IE8, particularly with alignment (cols=A&SI
Capital Allocation, Cap Var, A&SI Expense Allocation, Exp Var)
Is there any way to apply fix this issue
You mean it's not working? Columns accept only border, background, width and visibility css properties. Td's won't inherit other properties since they are not a direct descendant of the col element (a bit on understanding this can be found here). The most solid way is to set a class on td and style the td contents trought that.
I have some tables in my asp.net MVC application for layout purposes. Even though I usually use divs for most things, in some cases tables make most sense because they already have exactly the layout I'm after in these cases.
The only problem is, as far as I know the borders are supposed to be invisible unless you specify a width and style for the borders. But they aren't... They are rather vague, yes, but there are still light blue borders around each cell. What is that and how do I get rid of them? (Funny thing is I don't remember having seen this before when I used tables, which was a while ago).
I also tried specifically setting the border to 0px on both table and td, but that didn't work either...
Have you tried border: none for CSS or border='0' in the table declaration?
You can use cellspacing attribute in table tag
<table cellspacing='0' border='0'>
The CSS property border-collapse is used to achieve this effect. It will make adjacent cells share the same border. This property has the same end effect as the deprecated cellspacing attribute for tables.
table { border-collapse: collapse; }
Well, it turns out it was just a mistake on my part, the css selector wasn't accurate enough. I don't know why, but it didn't work just saying td{border:none;}, I had to specify table tr td{border:none;}, and then it worked...
Same issue i also faced the problem is css inheriting...may be you are not given in class
check for table or table td css in any of your css files in the solution
and make to 0px
table
{
border: solid 0px #e8eef4;
border-collapse: collapse;
}
table td
{
padding: 5px;
border: solid 0px #e8eef4;
}