html - 如何复制附加文档的确切布局？

Question

嗨，表单是一个 word 文档，我一直在尝试完全按照 html 的方式重新创建它，但不幸的是遇到了困难。

这就是我到目前为止所拥有的。也许，css 是它布局不正确的原因。

感谢你的协助。

CSS - 必须具备：

 <style type="text/css">
 table .mystyle
{
    border-width: 0 0 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
    border-style: solid;
    border-color:#000;
    width:900px;
}

.mystyle td, .mystyle th
{
    margin: 0;
    padding: 4px;
    border-width: 1px 1px 0 0;
    border-style: solid;
    font-size:medium;
    border-color:#000;
}
   </style>

当前的html：

  <table class="mystyle">
    <tr>
    <td style="width:50px;" class="style7">&nbsp;</td>
        <td style="width:158px;" class="style7">Milestone</td>
    <td style="width:158px;" class="style7">Owner</td>
        <td style="width:108px;white-space:nowrap;">
          <TABLE border="1">
             <TR>
               <TD colspan="2">Completion Date</TD>
            </TR>
            <TR>
              <TD>Target</TD>
              <TD>Actual</TD>
            </TR>
           </TABLE>
         </td>
        <td style="width:358px;" class="style7">Comments</td>
    </tr>
     <tr>

    </tr>
  </table>

最左边是第一季度到第四季度

Answer 1

布局该表的关键是使用rowspan和colspan属性。

http://tinker.io/174de/1

<table class="mystyle">
    <thead>
        <tr>
            <th rowspan="2">Quarter</th>
            <th rowspan="2">Milestone</th>
            <th rowspan="2">Owner</th>
            <th colspan="2">Completion Date</th>
            <th rowspan="2">Comments</th>
        </tr>
        <tr>
            <th>Target</th>
            <th>Actual</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th rowspan="3">Q1</th>
            <td>a</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td>b</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td>c</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <th rowspan="3">Q2</th>
            <td>a</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td>b</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td>c</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>