Menu
I may be missing the obvious, but any hint on why is Chrome wrapping the last column in this table? Shouldn't it calculate the column width so that the content fits? (given that the table does not actually fill the page). Both IE and Firefox seem to render it fine (or at least the way I expect it to be rendered).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
margin: 0 8px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some more text</td>
<td><span class="imgLink"><a href=""><img src="iconEdit.gif">Edit</a></span>
<span class="imgLink"><a href=""><img src="iconDelete.gif">Delete</a></span></td>
</tr>
</table>
</body>
</html>
Edit:
The table is NOT filling the available page width.
Here's a screenshot showing the wrapping in Chrome:
I actually found a workaround for this -- just adding white-space: nowrap; to the last column of the table. Still, I believe that Chrome is not calculating the width properly, or perhaps I am missing something. I would like to know what is going on.
768
Just guessing here, but I believe that Chrome does make an error in calculating the width of the table cell. Since inline elements are not supposed to have margins, it calculates the width of the td without taking the margin into account. But then it draws the spans with the margins anyway, so the spans are to wide to fit in the td's calculated width, making them wrap.
So possible solutions are:
inline-block, since inline blocks can have margins normally and then the calculations will be fine
189
Add display:inline-block to imgLink class: http://jsfiddle.net/surendraVsingh/MFZX2/4/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.imgLink {
margin: 0 8px;
display:inline-block;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some more text</td>
<td><span class="imgLink"><a href=""><img src="https://dl.dropbox.com/u/19982181/a.png">Edit</a></span>
<span class="imgLink"><a href=""><img src="https://dl.dropbox.com/u/19982181/a.png">Delete</a></span></td>
</tr>
</table>
</body>
</html>
Another answer figured by Grodriguez is applying white-space: nowrap to last column.
36
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
