flex布局这样。平均分布,但是需要改改结构,不用table
<style>
.color_container {
width: 100%;
height: 22px;
display: flex;
flex-direction: row;
border-bottom:solid 1px #fff
}
.color_container > div {
height: 22px;
flex: 1;
border-right:solid 1px #fff
}
.r {
background: red
}
.g {
background: green
}
</style>
<div class="color_container">
<div class="r"></div>
<div class="r"></div>
<div class="r"></div>
</div>
<div class="color_container">
<div class="r"></div>
<div class="r"></div>
<div class="g"></div>
</div>
<div class="color_container">
<div class="g"></div>
<div class="g"></div>
<div class="g"></div>
<div class="g"></div>
</div>
<div class="color_container">
<div class="g"></div>
<div class="r"></div>
<div class="r"></div>
</div>
<div class="color_container">
<div class="r"></div>
<div class="r"></div>
<div class="r"></div>
<div class="r"></div>
<div class="g"></div>
<div class="g"></div>
<div class="g"></div>
</div>
table最后一行合并这样
<style>
table.good td{border-collapse:collapse;border:solid 1px #fff;background:green;width:50px}
</style>
<table class="good">
<tr><td>0</td><td>1</td><td colspan="5">11</td></tr>
<tr><td>0</td><td>1</td><td colspan="5">11</td></tr>
<tr><td>0</td><td>1</td><td>1</td><td colspan="4">11</td></tr>
<tr><td>0</td><td>1</td><td colspan="5">11</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>0</td><td>0</td><td>0</td></tr>
</table>
有帮助麻烦点下【采纳该答案】,谢谢~~
那你要重新设计表格了,td本质上跟excel表一样,是按列对齐的,只不过你可以合并单元格
但是想让上下两列的竖线不对齐,除非你每行是单独一个table