I don't know why this bothers me so much, but when I create websites, I always try to do all my styling with CSS. However one thing I always have to remember to do when I'm working with tables is add cellspacing="0" and cellpadding="0"
Why is there not a CSS property to override these antiquated HTML 4 attributes?
Cellspacing :
table { border-collapse: collapse; }
As for cellpadding, you can do
table tr td, table tr th { padding: 0; }
mat already answered, but just for completeness:
padding → cellpadding
border-spacing → cellspacing
border-collapse → no HTML equivalent
It's also worth remembering that you can set separate horizontal and vertical values for the CSS ones e.g. border-spacing: 0 1px.
Eric Myer's reset stylesheet contains the following 'reset' style for table :
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
In addition TD, TR are reset :
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
The reason I mention this is that he has a comment 'tables still need cellpadding=0'. I assume he put this in here for a reason - probably needed by some old browsers. Judging by the fact that this is one of the very few comments he included I'm guessing its important and that there's a good reason for it.
Based on this comment - and this comment alone! - i'm continuing to use cellspacing="0" in the markup unless someone tells me definitively (below) why I dont need to. It could however likely be unnecessary in any modern browser worth supporting these days.
table { border-collapse:collapse; }
I guess somebody considered cell spacing a “bad practice”. How I understand it is equivalent included in CSS2 standard but IE does not support this property. border-collapse allows to set spacing to 0 value. Cell padding may be achieved setting padding property to TD elements of a table.
It's still a shame that cells cannot inherit their default padding from a CSS property of the row (tr), otherwise from rowgroup (thead/tbdy/tfoot) if it's not "initial", colgroup if it's not "initial", or the whole table.
"cellspacing" dos not have this problem (but in fact they are margins around cells, and these outer margins collapse with margins of the neighouring cells, and with the inner paddings of the table/rowgroup or row, where they are filled by the table's "background" setting (the table background also includes the table's "border" which is drawn on top of it and that also clips this background on the outer edge of the table's border, notably when this border has rounded corners).
But for the cellpadding, It would be jut simpler to defined "cell-padding: n" as a table or group property rather than on each cell separately and explicitly with its own "border: n" style (which should only be used if we need to override the padding in some specific cells).
Related
I need to hide row in html table. But I can't use property display: none.
Reason - we use tablesorter plugin with widgets staticRow and scroller and when we hide rows with display: none we have troubles with incorrect width in header and in table cells.
We discovered that problem is in display: none. We tried to use set from several properties for hiding rows
tr.hide, tr.hide td {
visibility: hidden;
height: 0;
line-height: 0;
font-size: 0;
padding 0;
}
But this row still have height (not so big as in other cells in table, but still have).
I added 2 examples to jsfiddle (first - with class, which I add above, second - with display:none), you can see difference.
UPD: I added
box-sizing: border-box;
And allmost solved my problem, but still exists 1-2 pixels instead of empty row.
UPD2: border-spacing: 0 for table remove this extra spacing
I am not sure if that's what you want, but you can add the attribute cellspacing="0" for the table. With css you can use.
#second_table { border-spacing:0;}
Today it's my first time I'm playing around with tables
and I have noticing that the table and tr and td tags have a little space between them,
like 1 px or so.
So here is my problem :
There is my code :
<table id="upload_box_container">
<tr>
<td class="border_bottom_1px">hi1</td>
<td class="border_bottom_1px">hi2</td>
</tr>
</table>
(upload_box_container - it's just background color and border color)
(border_bottom_1px - as it's name it only gives bottom border with 1px size)
and there is a picture of how it displays:
http://postimage.org/image/16wz2ao78/
My question is
why there is a space between the two bottom borders
and why there is a space in the sides of the table (like padding) and the borders don't touch the table border
thanks.
Define
table { border-spacing:0; }
and it should render in the way you want.
You need to reset the default styles applied by the browser.
Try at the top of your css file:
table, table tr, table td { padding:none;border:none;border-spacing:0;}
And check into some popular CSS resets out there:
http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/
I prefer to use this approach:
table { table-layout:fixed; border-collapse:collapse; }
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.
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 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;
}