CSS 空行不显示边框

Question

我在 table 中有一个 table，它有 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/

Answer 1

您可以通过以下方式将边框设置为tr。

tr {
    outline: thin solid;
}

Working Fiddle

Answer 2

尝试添加

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

https://jsfiddle.net/r0uL3gd3/

Answer 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>

希望对您有所帮助

CSS 空行不显示边框

CSS border will not show on empty row

css

html-table

border