如何显着地分隔嵌套表？

Question

如何将下表中的嵌套表与上表中显着分开？

上桌不合适。

我试图在下表的一行中获得和解融资时间3时间5坏。

这是我的代码：

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

回答这个问题：

  

我试图在下表的一行中获得和解融资时间3时间5坏。

垂直对齐表格单元格会将内容带到单元格的顶部，无论后面有多少行内容。

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

JSFiddle示例：https://jsfiddle.net/jennifergoncalves/y1Lr0mzw/

如果我错过了你想要完成的任务，请告诉我。