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; }
Related
I want to keep column background colors even if there are some spanning tdelements in the table. This image illustrates what I want to achieve. The columns should be completely colored, regardless of the td elements.
The code that I´ve got currently looks like this: http://www.bootply.com/9rjGrpg37X
As you can see, the td which spans 4 columns is also colored orange but instead I want to color it also green and blue like on the image above.
Is this even possible with html/css?
It is possible with the use of linear-gradient like this :
html :
<tr>
<td class="try" colspan="3">
<div class="centered green">333</div>
</td>
</tr>
css :
.try{
background :linear-gradient(90deg, #FF9950 43.34%, #92D050 43.34%, #92D050 71.66%, #9ED3D7 71.66%);
}
But it's not responsive ;(
You must try to find the % of the width of your column
Maybe it helps you.
css
.table td, .table th{width:33.334% !important;}
.col3{position:relative; width:calc(300% + 8px*4);}
html
<td>
<div class="centered green col3">333</div>
</td>
http://www.bootply.com/dG4mHK0WW9
Can you please take a look at this Demo and let me know why there are lines between the cells in the table while there is no border setting?
<table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
You can add
table{
border-collapse:collapse;
}
To collapse the borders
Fiddle
The default browser style add a padding of one pixel on table cells tags.
To avoid default browser css you can use a css file like http://meyerweb.com/eric/tools/css/reset/
You can also remove all borders in your table by using the border-spacing or border-collapse property on your table tag.
table {
border-spacing: 0;
}
or
table {
border-collapse: 0;
}
Use:
<table style="width:300px" cellspacing="0">
fiddle
The lines are caused by spacing between cells. It is empty space, which means that normally the background of the table (here, green) shines thru. This spacing is often described as “border spacing”, since it can be seen as spacing between logical borders. If no border has been set, like here, the borders still logically exist, though as zero width. For two adjacent cells, we thus have the setup
...[cell1 content] [right padding] [right border] [border spacing] [left border of cell2] [left padding of cell1] [cell1 content]...
So although it may look like a border, it is really spacing between (invisible) borders.
There are several ways to remove it:
Use the HTML attribute cellspacing=0 on the table element. This is supported by all browsers that render tables normally. Nominally, the attribute is deprecated in HTML 4, obsolete and nonconforming in HTML5, but browsers are still expected to keep supporting it.
Use table { border-spacing: 0 }, which corresponds to the HTML attribute. Browser support is good, but still more limited than for the other methods. This method lets you set nonzero border spacing for borders between rows, e.g. table {border-spacing: 0 2px}.
Use table { border-collapse: collapse }, which has very good browser support. It causes the collapsing border model to be used, with possible side effects. It makes the borders (possibly virtual, zero-width borders) of adjacent cells to coincide, so there cannot be any border spacing between them.
I want to make something similiar to this but with table rows
I did this with <li>, fancy borders, etc and was really easy, but with table rows, I tried pretty much everything, tr, td border collapse, separate, margins, paddings and I can't get it right.
The structure of the table I want to make is something like this:
<table>
<tr><td>abc</td><td>abc</td></tr>
<tr><td>abc</td><td>abc</td></tr>
<tr><td>abc</td><td>abc</td></tr>
</table>
You're looking for border-spacing.
http://www.w3schools.com/cssref/pr_tab_border-spacing.asp
#id1 {
border-collapse: separate;
border-spacing: 1em 0.5em;
}
On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}
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).