CSS: table {width:100%; display:block;} not working in Firefox
I have an html table within a div of a specific size. I want the table to apply margin collapse and be 100% wide. Here is my code. It renders how I want it to in IE8 and incorrectly in Firefox. Firefox may be doing the spec correctly, but whatever. How do I fix my css to work in both browsers?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
table
{
border-collapse: collapse;
border-spacing: 0;
}
table
{
margin: 10px 0;
width: 100%;
display: block;
}
p
{
margin: 10px 0;
}
td, th
{
border: 1px solid #000000;
}
</style>
</head>
<body>
<div style="width: 600px; border: 1px purple solid;">
<p>Some text at the top. Notice that the margin collapse does not work unless display:block.</p>
<table>
<tr>
<th></th>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Label 1</td>
<td>1.A</td>
<td>1.B</td>
<td>1.c</td>
</tr>
<tr>
<td>Label 2</td>
<td>2.A</td>
<td>2.B</td>
<td>2.c</td>
</tr>
</table>
<p>Some text at the bottom. Notice that the marg开发者_JS百科in collapse does not work unless display:block. Its stupid.</p>
</div>
</body>
</html>
I need the display:block for margin collapsing to work in Firefox. If you remove the display:block, you should notice that the spacing between the <p> tags widens from 10px to 20px.
This is also an edit to this question that I posted earlier, but it won't let me edit for some reason. I've been messing around with my internet cache so I probably messed up a cookie.
You need to add table-layout: fixed to the style assigned to the table, that's all.
Use display: table and your problem will be solved.
just remove the display: block;, the border-collapse works fine
remove
display: block;
change this
table
{
margin: 10px 0;
width: 100%;
display: block;
}
to
table
{
margin: 10px 0;
width: 100%;
}
for live demo
- http://jsfiddle.net/dN5DM/1/
Margin collapsing is only defined for block elements.
Tables are special. In the CSS specs, they're not quite block elements - special rules apply to size and position, both of their children (obviously), and of the table element itself.
check links
- http://www.w3.org/TR/CSS21/box.html#collapsing-margins
- http://www.w3.org/TR/CSS21/visuren.html#block-box
Solution to margin collapsing is
You could use a 1-pixel top padding or border to avoid margins from collapsing.
Okay, this is my first post on Stack Overflow, and I believe I have solved your issue. All I did was change the line "display: block;" to "position: relative;" and that seemed to have fixed the "stretching" issue.
I am using Chromium and I understood what you mean when the tables weren't stretching out as they were in Internet Explorer. I know Chromium and Firefox handle pages pretty similar, so that might have resolved your issue.
I'm just wondering.. If you're specifying div width="600" and then require the table to fit 100%.. Why not put a width on the table instead of the containing div.
don't mind me, Just curious to know what specifically you're trying to achieve other than the border-collapse.
You need to define the parent elements as 100% too, so the table knows what it is a percentage of.
You can fix any width trouble simply by adding a short JScritp ... first add this to your BODY tag: onload="autoadjustw"; and this little script in the head tag:
function autoadjustw(){
AN=document.getElementById("parent_object").offsetWidth;
document.getElementById("Table_Id").style.width=AN+"px";
}
if removing display: block breaks in IE use '\9' to target IE only like:
table
{
margin: 10px 0;
width: 100%;
display: block\9; /*for ie only"*/
}
Tables do not use display: block; Simple width: 100%; should do the display: block; trick.
Never have, never will!
加载中,请稍侯......
精彩评论