使每一行的td宽度平均分配表格宽度

img


把每一行都和最后一行一样宽,最后一行的宽度等于表格设定的宽度

flex布局这样。平均分布,但是需要改改结构,不用table

img

<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最后一行合并这样

img

<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