html - Safari table cells border vertical-align -
recently have found problem on safari table. have problem red line (td bottom border or upper). here on fiddle http://jsfiddle.net/ryrms/55. , full source:
<table border="0"> <tbody> <tr> <td style="border-bottom: 2px solid red;"> <div style="width: 20px;"></div> </td> <td style="border: 1px solid blue; height: 156px;" rowspan="2"> content1<br/> content2<br/> content3<br/> </td> </tr> <tr> <td style="border-top: 2px solid green;"> <div style="width: 20px;"></div> </td> </tr> </tbody> </table>
the problem cells not capture 50% of space in safari first takes 0 , third td takes available height. works in browser except safari.
i can't specify fixed height of div or td tag, because it generated many times in code , there different heights , many tables 1 inside another.
i can't figure out problem safari , how fix it. have hints?
it looks like: http://i.stack.imgur.com/hhbhc.png
if explicitly setting height: 156px;
on td spans both rows, why not set other 2 tds height: 88px;
?
html
<table border="0"> <tbody> <tr> <td style="border-bottom: 2px solid red; height: 88px;"> <div style="width: 20px;"></div> </td> <td style="border: 1px solid blue; height: 156px;" rowspan="2"> content1<br/> content2<br/> content3<br/> </td> </tr> <tr> <td style="border-top: 2px solid green; height: 88px;"> <div style="width: 20px;"></div> </td> </tr> </tbody> </table>
css
table { border-collapse: separate; border-spacing: 0; } td { vertical-align: middle; text-align: center; }
results
(tested in ff, chrome, safari, , ie)
Comments
Post a Comment