html中的rowspan问题

Question

我正在为我的解决方案开发一份报告表。但是我在从表中合并行时遇到了问题。我附加了图像和一些源代码。在此图像中，我想合并黄色标记列并使其单一。有人请帮帮我。

＆＃13;

＆＃13;

transition:"<?php if (in_array('slide', $slide_transition)) { echo 'slide,'; } if (in_array('elastic', $slide_transition)) { echo 'elastic,'; } if (in_array('fade', $slide_transition)) { echo 'fade,'; } if (in_array('blocks', $slide_transition)) { echo 'blocks,'; } ?>", scalemode:"fill",isfullscreen:false, textformat: {}

＆＃13;

.mytable {
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
.mytable-head {
  border: 1px solid black;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mytable-head td {
  border: 1px solid black;
  padding-top: 1px;
}
.mytable-body {
  border: 1px solid black;
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mytable-body td {
  border: 1px solid black;
  border-top: 0;
}
.mytable-footer {
  border: 1px solid black;
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.mytable-footer td {
  border: 1px solid black;
  border-top: 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这里，我可以使用<Div>标签进行此设计。代码在这里：

＆＃13;

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

＆＃13;

<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>

<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:60%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:60%; height:30px; border:1px solid black;  float:right;"></div>
</div>

<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>

<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:30%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>

<div id="border" style="width:100%; height:30px;">
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>  
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>

<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>
<div id="border" style="width:100%; height:30px;">
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black; float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:10%; height:30px; border:1px solid black;  float:right;"></div>
  <div style="width:40%; height:30px; border:1px solid black;  float:right;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是解决方案。

您可以在此处修改 jsFiddle

添加了代码（CSS）：

tr>td:first-child{
  background: #ffe500;
}
tr>td{
  border: 1px solid #ffe500 !important; 
}

＆＃13;

＆＃13;

.mytable {
  border-collapse: collapse;
  width: 100%;
  background-color: white;
}
.mytable-head {
  border: 1px solid black;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mytable-head td {
  border: 1px solid black;
  padding-top: 1px;
}
.mytable-body {
  border: 1px solid black;
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mytable-body td {
  border: 1px solid black;
  border-top: 0;
}
.mytable-footer {
  border: 1px solid black;
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.mytable-footer td {
  border: 1px solid black;
  border-top: 0;
}
tr>td:first-child{
	background: #ffe500;
	border: 1px solid #ffe500;
}
tr>td{
	border: 1px solid #ffe500 !important;
}

＆＃13;

<table class="mytable mytable-body">
  <tr>
    <td width="10%" colspan="4">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="10%" colspan="4">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>

  <tr>
    <td width="10%" colspan="3">Null</td>
    <td width="10%" colspan="4">Null</td>
  </tr>
  <tr>
    <td width="10%" colspan="3">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="10%" colspan="3">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%" colspan="6">Null</td>
  </tr>
  <tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%" colspan="6">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%" colspan="3">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%" colspan="4">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
  <tr>
    <td width="40%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
    <td width="10%">Null</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;