在表格的表格的html中需要一个表格结构

时间:2016-03-15 11:15:51

标签: html angularjs

Need Table like this.

请参阅上面图片中所需的表格结构。任何机构都可以指导如何实现这一目标

1 个答案:

答案 0 :(得分:1)

喜欢这个吗?

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  vertical-align: middle;
}
.tg td {
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
.tg th {
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
.tg .tg-7uzy {
  background: #cfc;
}
.tg .tg-yw4l {
  background: #ccf;
}
<table class="tg">
  <tr>
    <th class="tg-yw4l"></th>
    <th class="tg-yw4l">Col 1</th>
    <th class="tg-yw4l">Col 2</th>
    <th class="tg-yw4l">Col 3</th>
    <th class="tg-yw4l">Col 4</th>
  </tr>
  <tr>
    <td class="tg-7uzy" rowspan="3">Row 1</td>
    <td class="tg-7uzy" rowspan="3"></td>
    <td class="tg-7uzy" rowspan="3"></td>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
  </tr>
  <tr>
    <td class="tg-yw4l" rowspan="3">Row 2</td>
    <td class="tg-yw4l" rowspan="3"></td>
    <td class="tg-yw4l" rowspan="3"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
  </tr>
  <tr>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-7uzy">Row 3</td>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
    <td class="tg-7uzy"></td>
  </tr>
  <tr>
    <td class="tg-yw4l">Row 4</td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
</table>