CSS边框不会显示在空行上答案

【问题标题】：CSS border will not show on empty rowCSS边框不会显示在空行上
【发布时间】：2017-04-15 20:35:31
【问题描述】：

我在一个有 2 行的表中有一个表。我设法为包含一个单词的第一行设置了边框。但是，我只是无法显示底部空行的边框。

HTML：

    <table  class="WorkflowBlock"  width="160" cellspacing="0" cellpadding="0">
   <tbody>
      <tr>
         <td valign="Top">
            <table width="100%" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <td height="30" align="Left" class="stepNext" valign="Top" colspan="3">
                        <span title="Order">
                           <ol class="flow" start="4">
                              <li style="font-weight: bold;">Order</li>
                           </ol>
                        </span>
                     </td>
                  </tr>
                  <tr class="content">
                     <td>&nbsp;</td>
                     <td><br><br><br><br><br><br><br><br><br></td>
                     <td>&nbsp;</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

CSS

.WorkflowBlock .stepNext {
    color: #333333;
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
}
.WorkflowBlock .content {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
}

知道我错过了什么吗？这是提琴手：https://jsfiddle.net/50qhrph6/

【问题讨论】：

标签： css html-table border

【解决方案1】：

尝试添加

.WorkflowBlock .content {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    display: table-cell;
}

https://jsfiddle.net/r0uL3gd3/

【讨论】：

【解决方案2】：

您可以按照以下方式将边框设置为tr。

tr {
    outline: thin solid;
}

Working Fiddle

【讨论】：

边框应该像顶行，从 css 的“内容”类应用。我怀疑 HTML 中有问题，但我无法确定它到底是什么。

【解决方案3】：

尝试添加：

.WorkflowBlock table{
    border-collapse: collapse;
}

.WorkflowBlock .stepNext {
    color: #333333;
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
}
.WorkflowBlock .content{
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
}

.WorkflowBlock table{
    border-collapse: collapse;
}

<table  class="WorkflowBlock"  width="160" cellspacing="0" cellpadding="0">
   <tbody>
      <tr>
         <td valign="Top">
            <table width="100%" cellspacing="0" cellpadding="0">
               <tbody>
                  <tr>
                     <td height="30" align="Left" class="stepNext" valign="Top" colspan="3">
                        <span title="Order">
                           <ol class="flow" start="4">
                              <li style="font-weight: bold;">Order</li>
                           </ol>
                        </span>
                     </td>
                  </tr>
                  <tr class="content">
                     <td>&nbsp;</td>
                     <td><br><br><br><br><br><br><br><br><br></td>
                     <td>&nbsp;</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

希望对你有帮助

【讨论】：