如何在没有CSS的情况下圆角化表格？

Question

我有以下2x1单元格，其中单元格1中有图像，单元格2中有文本。我想要圆角，例如在此处找到的示例。 我使用了border-radius但仍然有硬的角。 我不能使用CSS，因为这是将通过电子邮件发送的新闻通讯。 我感谢任何见识。

<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>

Answer 1

问题在于border-collapse: collapse; 您需要使用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> 

结果是：

您可以在https://www.w3.org/TR/CSS21/tables.html#separated-borders和https://www.w3.org/TR/CSS21/tables上查看有关表格上不同边框样式的文档.html＃collapsing-borders 。 上面的代码段可以在电子邮件中使用，也可以作为独立页面使用，但建议将CSS分离为独立页面。

Answer 2

从更改表格标签

<table border="3" width="723" cellspacing="0" cellpadding="0" style="border-collapse:collapse border-radius:15px 50px">

至

<table border="3" width="723" cellspacing="0" cellpadding="0" >

并使用此CSS

table {
    border: 2px solid;
    border-radius: 25px;
}

如果只希望在外部表上具有此圆角，则给它一个ID或一个类，并在CSS中引用新的ID或类，而不是引用所有表元素。