如何在沒有CSS的情況下圓桌子的角落？

我有以下2x1單元格，其中單元格1中有圖像，單元格2中有文本。我需要圓角，例如發現的例子here。我用border-radius，但我仍然有硬角。我無法使用CSS，因爲這是通過電子郵件發送出去的簡報。我感謝任何見解。如何在沒有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>

來源

2017-10-09 Stephen

也張貼你的CSS。 –

@DanielD沒有使用CSS。這是我們試圖發送的通訊。 – Stephen

變化從

<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或clas並引用CSS中的新ID或類，而不是引用所有表元素。

來源

2017-10-09 20:45:10 TidyDev

我應該澄清一點，我不能使用CSS，因爲這是一個將被淘汰的通訊。我希望這對別人有幫助。 – Stephen

然後使用內聯CSS – TidyDev

我有你引用的表標記（樣式），它不起作用。 – Stephen

的問題是與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分開。

來源

2017-10-09 21:09:24

如何在沒有CSS的情況下圓桌子的角落？

回答

相關問題