For some reason, one of the inside borders disappears on my table whenever I change the default height with some CSS.
HTML:
<table class="event">
<tr>
<td>Start Date</td>
<td>2009-6-2</td>
</tr>
<tr>
<td>End Date</td>
<td>2009-6-8</td>
</tr>
<tr>
<td>Location</td>
<td>Vail</td>
</tr>
</table>
CSS:
table.event
{
border-collapse: collapse;
border: 1px solid #000;
width: 33%;
height: 300px;
}
table.event td
{
border: 1px solid #000;
padding: 2px;
}
Here's what it currently looks like
http://img410.imageshack.us/img410/394/whatv.png http://img410.imageshack.us/img410/394/whatv.png
Anybody have any ideas on how I can fix this problem?
If you take your code and put it directly in a blank html page, does it work? I am wondering if there is something outside causing it, perhapes in a different CSS (just guessing).
I pulled this open in FF, Safari, Opera, Chrome, IE6-7 and 8 and could not replicate it.
Even with/without out the border-collapse i get the same results.
Just solved the problem. Jeez, I feel like an idiot. The reason this was happening was because I was "zoomed out" a little bit in Firefox. The scaling got rid of one of the inside borders.
Thanks to all for the help, It was Jason Heine's idea that eventually lead to me figuring it out.
That code works fine for me in firefox and ie7. Are you changing the height with javascript or something else, or just within the editor? However, you could try getting rid of border-collapse.
Related
I have a table in which I have this
</tr>
<tr class="table-top-background" >
<td class="thread-pic" ></td>
<td class="thread-top-middle" colspan="2" >Threads</td>
<td class="thread-information">Last Post</td>
</tr>
So I want to give background image to my tr, so I put this
.table-top-background
{
background:url('/img/design/extra-large-back.png') no-repeat;
position:relative;
color:White;
height:31px;
}
.thread-pic
{
width:30px;
}
.thread-information
{
width:280px;
}
.thread-top-middle
{
width:418px;
}
The problem is that in all browser's it is fine expect Google Chrome.
In Google Chrome it seems that I give background not to tr, but to all td's... It repeat same background for each td.
It is the same in IE7, but in one of stackoverflow questions I read about solving that with position:relative and it helped.
But I didn't find any solutuin for Chrome.
I try to give tr css like this also
.table-top-background
{
background:url('/img/design/extra-large-back.png') no-repeat 0% 100%;
display:block;
position:relative;
color:White;
height:31px;
width:728px;
}
But it change all my table design... At that time text's in td's of this header row aren't in that places and also all other first td's of my table are in the same size as my header tr . It seems really hillarious.
I tried also to give display:inline-table instead of display:block and it didn't help me too...
What is the solution of that problem?
EDIT: Same problem is in Safari, so it is webkit problem.
Although it worked for me, take a look at:
Can we solve the table row background image problem, in chrome, in multi celled tables?
Which mentions this fiddle:
http://jsfiddle.net/pzjUt/
Using display:table-cell on the <tr> seems to do the trick, but it may have side effects in Chrome or other browsers.
I want to set the border of <tr> to yellow. I can set the border of <td> but can't figure how to set border of row <tr>.
How to do this?
Thanks.
This example is working fine on IE8, Chrome 9 and Firefox 3.6 so I really can't see what is the problem.
HTML used in the example:
<table>
<tr>
<td>AAA</td>
<td class="middle">BBB</td>
<td>CCC</td>
</tr>
</table>
CSS:
.middle { border: 2px solid blue; }
tr { border: 2px solid red; }
Result:
No can do, ime, even though css spec ( http://www.w3.org/TR/CSS2/box.html#border-properties ) plainly says border and border-color can be applied to "all elements". Though it might be because <table> might not fall under the box model; I'm not sure about this.
In any case, it's a counter-intuitive, crazy-seeming, page-bloat-inducing pita.
There must be better solutions than bordering every single table cell, which is what I end up doing.
-- pete
It does work, and by the spec.
The problem is that the borders collapse, and you did not expect that.
And by the spec the border for td tends to dominate over the border for tr:
http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution
Write a CSS rule for the tr element? Something like tr {border: ...} Have you tried this and it's not working? Validate your HTML code first with the W3C markup validator and solve the errors if there are any indicated.
I did it without css.
<TR BORDERCOLOR="RED" BGCOLOR ="PINK">output
works in IE but not firefox,chrome or even edge.
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to
I need help in this:
if i try to integrate this on a newsletter mailchimp the lines goes down here is the screenshot:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic4.png
can someone help me why is this happening?
if I test this in a textpad it looks good, and if I try to put the code now in mailchimp, it the lines are reformatted. any idea?
thanks
Add
border-top: 1px solid #000;
To the style attribute for the <td> tags.
You can change the color to anything you want obviously and you may want to look into using external CSS stylesheets.
Something like:
td { border-top:2px solid #fb0 }
td { padding-left:25px; padding-bottom:10px; padding-top:10px; width: 30% }
tr.alt { background: #ffc }
the row to have the background will use
<tr class="alt">
it is also common practice to put all the style in a css file or in the separate <style> tag region.
sample: http://jsfiddle.net/2LXUn/2/
If you want a table, with only border at the top, the following will work.
<table style="border-color:#008000;border-style: solid none none none;border-width:2px; width: 100%">
<tr> <td > row1</td>
</tr> <tr >
<td>row2</td> </tr>
</table>
You may also apply the border style to table rows as required.
Given the following HTML page a horizontal line appears at the top of the table where the 1st row would have a 2nd and 3rd cell (if they were defined).
<html>
<head>
<Title>Test Page</Title>
<style type="text/css">
table {
margin:10px 0 10px 0;
padding:0;
margin: 0 0 0 0;
border-collapse: collapse;
border: 0;
}
td {
border:1px solid #CCCCCC;
padding:5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Test Title</td>
</tr>
<tr>
<td>Sub Title</td>
<td>Sub Title</td>
<td>Sub Title</td>
</tr>
<table>
</body>
</html>
I would like the line (highlighted below) removed by modifying CSS only. This line appears in Firefox but not IE6.
Note that I cannot modify the HTML in any way as this is generated by a third party system (the example above is simply to highlight the issue). This third-party system only allows me to modify the CSS.
This will get it to render without the top border in Firefox:
table, td {
border: 1px #CCC;
}
table {
margin: 0;
border-spacing: 0;
border-style: none none solid solid;
}
* html table {
border-collapse: collapse;
}
td {
border-style: solid solid none none;
padding: 5px;
}
It also works fine in IE7 for me. If it breaks in IE6, use conditional comments or css hacks to revert it to the state it was in your own code for IE6 only.
EDIT: Your third party tool is generating bad/invalid markup which will give you a very large browser compatibility/css headache, if it is at all feasible, replace it or generate the html yourself
Technically speaking the first row should be marked up as
<tr>
<td colspan="3">Test Title</td>
</tr>
So I don't think you can acheive that using tables.
A css tip
margin: 10px 0;
Puts 10px at the top and bottom and 0 on the left and right
The empty-cells property may help you in this case.
table {
empty-cells:hide;
}
Then again, maybe not. Can you also explicitly turn off the border of the table rows?
Is using javascript an option? You could inject a non breaking space into the cell, that should draw the border.
Here is the solution for this problem that really works. I found this out after sooo long
The problem is with tbody tag.
Check the solution here:
http://www.dashplanet.com/firefox-displaying-border-top-of-table-how-to-hide-that-1px-top-border-table
From Firefox Colspan Border-COllapse Bug:
The obvious workaround is to just set
the colspan before the DOM has
finished loading, or at minimum,
before the table has finished
rendering. However, this requires that
we clutter our otherwise clean HTML
with inline tags, or have
prior knowledge of the number of
columns at the HTML generation stage.
I hope to find a more elegant
"non-invasive JavaScript" solution in
the future, but at the current time I
don't know of one. Simply setting the
table's "display" style to "none" and
then re-setting it back to "block" did
not do the trick.