How to round corners of a table without CSS?
Question
I have the following 2x1 cell where I have an image in cell 1 and text in cell 2. I want rounded corners such as the examples found here . I used border-radius but I still have hard corners. I cannot use CSS as this is for a newsletter that will be emailed out. I appreciate any insight.
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<img alt="" width="275" height="150" style="border-width: 0px" src="http://www.path.com/to/image.png"></img>
</td>
</tr>
</tbody>
</table>
</td>
<td style="border:none">
<table align="left" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td>
<span style="font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px;">
<p>test text</p>
</span></td>
</tr>
</tbody>
</table>
</td>
</table>
2 answers
solution1
2 2017-10-09 21:09:24
The issue is with border-collapse: collapse; you need to use the border-collapse: separate;
<html> <head> <style> td > span { font-family: trebuchet ms,verdana,arial,helvetica,sans-serif; font-size: 12px; } td > img { /* border-width: 0px; */ border-radius: 15px 0 0 50px; } body > table { border-collapse: separate; border-radius: 15px 50px; border: 3px solid #000; } </style> </head> <body> <table width="723" cellspacing="0" cellpadding="0" > <tr> <td> <table align="left" border="0" cellspacing="0" cellpadding="10"> <tbody> <tr> <td> <img alt="" width="275" height="150"src="http://via.placeholder.com/275x150"></img> </td> </tr> </tbody> </table> </td> <td> <table align="left" border="0" cellspacing="0" cellpadding="10"> <tbody> <tr> <td> <span> <p>test text</p> </span></td> </tr> </tbody> </table> </td> </tr> </table> </body> </html>
Results in:
You can see documentation about the different styles of border on tables at https://www.w3.org/TR/CSS21/tables.html#separated-borders and https://www.w3.org/TR/CSS21/tables.html#collapsing-borders . The snippet above should work in an email or as a stand alone page but would recommend separating the CSS for a standalone page.
solution2
0 2017-10-09 20:45:10
Change your table tag from
<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">
to
<table border="3" width="723" cellspacing="0" cellpadding="0" >
And use this CSS
table {
border: 2px solid;
border-radius: 25px;
}
If you only want this rounded corner on the outer table, then give it an ID or a class and reference the new ID or class in the CSS instead of referencing all table elements.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.