Question

我有以下2x1单元格，其中我在单元格1中有一个图像，在单元格2中有文本。我想要圆角，例如找到的示例here。我使用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或类，而不是引用所有表元素。

如何在没有CSS的情况下圆桌角？

2 个答案: