I'm trying to get a DIV element into a table cell, in a way in which the DIV spreads along all the cell's area. But, for unknown reason, a 1px border appears; as far as I know, it's neither part of the table or the div (table has no borders, padding or spacing, and the div has no margin or padding). Perhaps you can spot me the bug?
<html>
<head>
<style type="text/css">
#arrow {
border-style: solid;
margin: 0;
padding: 0;
border-width: 100px 0px 100px 50px;
border-color: blue blue blue red;
}
table {
border-collapse: collapse;
border-style: none;
padding: 0px;
spacing: 0px;
}
</style>
</head>
<body>
<table>
<tr>
<td bgcolor="red">
Blah,
</td>
<td>
<div id="arrow"><!----></div>
</td>
<td bgcolor="blue">
blah.
</td>
</tr>
</table>
From stackoverflow
-
CSS property is "border-spacing" instead of "spacing"
In addition I reset tables using
outline: 0;Alex Ati : Thanks! Anyway, the problem persists. -
<table cellspacing="0" cellpadding="0" border="0">-- or --
td { padding:0 } -
Add styling for the table cell(s):
<html> <head> <style type="text/css"> #arrow { border-style: solid; margin: 0; padding: 0; border-width: 100px 0px 100px 50px; border-color: blue blue blue red; } table { border-collapse: collapse; border-style: none; padding: 0px;} td { padding:0; border:0;} </style> </head> <body> <table> <tr> <td bgcolor="red"> Blah, </td> <td> <div id="arrow"><!----></div> </td> <td bgcolor="blue"> blah. </td> </tr> </table> </body> </html>Alex Ati : I gave the correct answer to Abraham Pinzur, as he responded earlier, but thanks anyway!Jared : You're welcome. I should have mentioned that a good thing to do with your css is reset the browser styles first off. Check out http://meyerweb.com/eric/tools/css/reset/index.html for a great example.
0 comments:
Post a Comment