HTML表格内容对齐答案

【问题标题】：HTML table content alignmentHTML表格内容对齐
【发布时间】：2019-02-28 16:44:01
【问题描述】：

这是我的代码

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="font-size:40px;line-height:2px;color:red;">◖</td> 
    <td style="width:80px;height:30px;background-color:red;"></td> 
    <td style="font-size:40px;line-height:2px;color:red;">◗</td>
  </tr>
</table>

Fiddle Example

我想要做的是将我的表格内容显示为下面的div（带边框半径）

<div style="width:120px;height:30px;background-color:red;border-radius:50px;"></div>

我必须使用这样的表格，因为此代码将在不支持 border-radius 的 Outlook 桌面客户端的 html 电子邮件中使用。

【问题讨论】：

你的问题是什么？
对不起，小提琴错了，我已经更新了我的问题。问题是，半圆和矩形之间有一个空格。
是的，我知道半圆本身有空间，但是有什么办法吗？喜欢使用带有负值的填充？这个我试过了，还是不行。

标签： html css

【解决方案1】：

    <table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <div style="padding: 0;
         margin: 0;
         font-size: 40px;
         line-height: 2px;
         color: red;
         background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
         background-repeat:no-repeat;
         transform: rotate(180deg);
         height: 186px;
         width:90px;
         display:inline-block;
         ">
      </div>
      <div style="width: 212px;height: 179px;background-color:#c60000;display:inline-block;"></div>
      <div style="
         padding: 0;
         margin: 0;
         font-size: 40px;
         line-height: 2px;
         color: red;
         background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
         height: 186px;
         background-repeat:no-repeat;
         width:90px;
         display:inline-block;
         background-position: 0px 7px;
         "></div>
   </tr>
</table>

JSFiddle

使用图像而不是字符。

【讨论】：

不错的技巧，但我应该避免使用图片网址，因为 Outlook（桌面）有时会阻止图片网址。所以它有点马车。
Rounded corners in outlook without images 检查这些答案也许这些对你有用

【解决方案2】：

完全基于div。

div.my-button{
  padding: 12px 18px 12px 18px;
  border: 1px solid #e9703e;
  background-color: #EB7035;
  border-radius: 10px;
  font-size: 16px;
  margin-top: 20px;
  width: 119px;
}
div.my-button a{
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
  text-decoration: none;
}

<div class="my-button">
	<a href="http://litmus.com" target="_blank">I am a button &rarr;</a>
</div>

【讨论】：

他们不能使用border-radius，因为 Outlook 桌面客户端不支持它