Menu
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 margin 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.
724
Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.
You need to set the margin of the body to 0 for the table to stretch the full width. Alternatively, you can set the margin of the table to a negative number as well. Save this answer.
HTML tables can have different sizes for each column, row or the entire table. Use the style attribute with the width or height properties to specify the size of a table, row or column.
In "Table Tools" click the [Layout] tab > locate the "Cell Size" group and choose from of the following options: To fit the columns to the text (or page margins if cells are empty), click [AutoFit] > select "AutoFit Contents." To fit the table to the text, click [AutoFit] > select "AutoFit Window."
You need to add table-layout: fixed to the style assigned to the table, that's all.
66
Use display: table and your problem will be solved.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
