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

Question

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

Answer 1

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>

有帮助麻烦点下【采纳该答案】，谢谢~~