html - 边框单元格间距无法正常工作html

Question

我有这个 html 代码：

<table style='border-collapse: separate; border-spacing: 10px;'>
     <tr class='signatureContainer'>
          <td class='signatureBox' style='float: left;' >
                <span>%%%employee%%%</span>
                <hr style='margin-top: 70px;' />
                <span>%%%Role%%%</span>
          </td>
          <td class='commentsBox' style='float: left'>
                <span> &nbsp; </span>
                <hr style='margin-top: 70px;' />
                <span>Comments</span>
          </td>
          <td class='signatureBox' style='float: left'>
                <span> &nbsp; </span>
                <hr style='margin-top: 70px;' />
                <span> Master &nbsp; </span>
          </td>
    </tr>
</table>

并应用了以下样式：

.signatureContainer {
display: table;
width: 100%;
margin: 30px 0 50px 0;
}
.signatureBox{
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(128, 128, 128);
min-width: 150px;
min-height: 65px;
padding: 3px;
display: block;
margin-left: 20px;'
}
.commentsBox{
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(128, 128, 128);
min-width: 600px;
min-height: 65px;
padding: 3px;
display: block;
margin-left: 20px;
margin-right: 20px'
}

当我运行页面时，单元格之间没有空格。查看代码你认为问题是什么，它看起来没有分开。

Answer 1

<table style='border-collapse: separate; border-spacing: 10px !important;'>
     <tr class='signatureContainer'>
          <td class='signatureBox' style='float: left;' >
                <span>%%%employee%%%</span>
                <hr style='margin-top: 70px;' />
                <span>%%%Role%%%</span>
          </td>
          <td class='commentsBox' style='float: left'>
                <span> &nbsp; </span>
                <hr style='margin-top: 70px;' />
                <span>Comments</span>
          </td>
          <td class='signatureBox' style='float: left'>
                <span> &nbsp; </span>
                <hr style='margin-top: 70px;' />
                <span> Master &nbsp; </span>
          </td>
    </tr>
</table>

!important在应用空间时设置。

Answer 2

你有一个错误是你的css改变它。

.signatureContainer {
display: table;
width: 100%;
margin: 30px 0 50px 0;
}
.signatureBox{
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(128, 128, 128);
min-width: 150px;
min-height: 65px;
padding: 3px;
display: block;
margin-left: 20px;
}
.commentsBox{
border-radius: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(128, 128, 128);
min-width: 600px;
min-height: 65px;
padding: 3px;
display: block;
margin-left: 20px;
margin-right: 20px
}

<table style='border-collapse: separate; border-spacing: 10px;'>
     <tr class='signatureContainer'>
          <td class='signatureBox' style='float: left;' >
                <span>%%%employee%%%</span>
                <hr style='margin-top: 70px;' />
                <span>%%%Role%%%</span>
          </td>
          <td class='commentsBox' style='float: left'>
                <span> &nbsp; </span>
                <hr style='margin-top: 70px;' />
                <span>Comments</span>
          </td>
          <td class='signatureBox' style='float: left'>
                <span> &nbsp; </span>
                <hr style='margin-top: 70px;' />
                <span> Master &nbsp; </span>
          </td>
    </tr>
</table>