表头HTML

时间:2017-05-22 19:21:12

标签: html html-table

我试图在HTML中创建此表头。但是我无法使用正确的col-span限制。

任何帮助?

**我能够得到解决方案,看起来就像我正在寻找的那样。

此网站http://html.com/tables/rowspan-colspan/有所帮助。

enter image description here

我的解决方案:



<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-031e" rowspan="4">A</th>
    <th class="tg-031e" rowspan="4">B</th>
    <th class="tg-031e" rowspan="4">C</th>
    <th class="tg-031e" rowspan="4">D</th>
    <th class="tg-baqh" colspan="8">E</th>
  </tr>
  <tr>
    <td class="tg-031e" rowspan="3">F</td>
    <td class="tg-s6z2" colspan="7">G</td>
  </tr>
  <tr>
    <td class="tg-s6z2" colspan="6">H</td>
    <td class="tg-031e" rowspan="2">I</td>
  </tr>
  <tr>
    <td class="tg-yw4l">J</td>
    <td class="tg-yw4l">K</td>
    <td class="tg-yw4l">L</td>
    <td class="tg-yw4l">M</td>
    <td class="tg-yw4l">N</td>
    <td class="tg-yw4l">O</td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
</table>
&#13;
&#13;
&#13;

这解决了我的问题。

感谢大家的帮助

0 个答案:

没有答案