Question

我在表中有一个包含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

您可以按照以下方式将border设置为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边框不会显示在空行上

3 个答案: