如何顯着地分離嵌套表？

-4

如何顯式地將上表中的嵌套表與上表分開？如何顯着地分離嵌套表？

雖然上表不正確。

我想獲得解決方案財務時間3時間5壞在一個較低的表中的單行。

這裏是我的代碼：

.my-table { 
 
    border: 1px solid #000; 
 
} 
 

 
.my-table tr:nth-child(even) { 
 
    background: #ddd; 
 
} 
 

 
.my-table tr:nth-child(odd) { 
 
    background: #fff; 
 
}

<table class="my-table"> 
 
    <tr> 
 
    <th>Service</th> 
 
    <th>Provider</th> 
 
    <th>Check</th> 
 
    <th>Marker</th> 
 
    <th>Captured Time</th> 
 
    <th>Final Time</th> 
 
    <th>Status</th> 
 
    <th>Comments</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Sub Heading</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Custody C</td> 
 
    <td>I</td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Settlements</td> 
 
      <td>Finance</td> 
 
      <td>Time 3</td> 
 
      <td>Time 5</td> 
 
      <td>Bad</td> 
 
      <td>Good</td> 
 
     </tr> 
 
     </table> 
 
     <table> 
 
     <tr> 
 
      <td>Crossroad</td> 
 
      <td> 
 
      <table> 
 
       <tr> 
 
       <td>Complete</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Partial</td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
      <td> 
 
      <table> 
 
       <tr> 
 
       <td>Time 4a</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Time 4b</td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
      <td> 
 
      <table> 
 
       <tr> 
 
       <td>Time 6a</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Time 6b</td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
      <td>Ok</td> 
 
      <td>danke</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<br> 
 
<table class="my-table"> 
 
    <tr> 
 
    <th>Service</th> 
 
    <th>Provider</th> 
 
    <th>Check</th> 
 
    <th>Marker</th> 
 
    <th>Captured Time</th> 
 
    <th>Final Time</th> 
 
    <th>Status</th> 
 
    <th>Comments</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Sub Heading</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Custody T</td> 
 
    <td>G</td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Trades</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Position</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td>Latest</td> 
 
    <td>TIME 1</td> 
 
    <td>TIME 2</td> 
 
    <td>Good</td> 
 
    <td>My Comments</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>Custody C</td> 
 
    <td>I</td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Settlements</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Crossroad</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Finance</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <table> 
 
       <tr> 
 
       <td>Complete</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Partial</td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 

 

 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Time 3</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <table> 
 
       <tr> 
 
       <td>Time 4a</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Time 4b</td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      Time 5 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <table> 
 
       <tr> 
 
       <td>Time 6a</td> 
 
       </tr> 
 
       <tr> 
 
       <td>Time 6b</td> 
 
       </tr> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Bad</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Ok</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table> 
 
     <tr> 
 
      <td>Good</td> 
 
     </tr> 
 
     <tr> 
 
      <td>danke</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 

 
    </tr> 
 
</table>

來源

2017-07-07 Ayadirh

您可以以任何想要的方式設定每張表的樣式。 – ceejayoz

將'vertical-align：top'添加到包含'table'的'td'中。 – sol

您不應該嵌套表....使用'colspan'和'rowspan'來獲得所需的效果。你也可以考慮使用CSS來定位你的元素而不是表格，特別是如果你想以不同的方式設置它的一部分。 – sorayadragon

要回答這個問題：

我試圖讓住區融資時間3時5×○在單行在下表中。

垂直對齊表格單元格會將內容放到單元格的頂部，而不管內容的行數如何。

.my-table td { 
    vertical-align: top; 
}

的jsfiddle例子：https://jsfiddle.net/jennifergoncalves/y1Lr0mzw/

請讓我知道如果我錯過了什麼你試圖完成。

來源

2017-07-07 14:38:09

如何顯着地分離嵌套表？

回答

相關問題