表格的css 怎么修改

Question

        <table border="1" style="width:100%">

            <tr>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
            </tr>
            <tr>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
            </tr>
            <tr>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
                <td>aaaaaa</td>
            </tr>

        </table>

怎么把一个<table>的样式变成如下图的？？？？ 
就是把第二行的最后一格拉宽，
 本人菜鸟一个，请求大神帮助

Answer 1

你好，

你可以为这个table添加header，然后使用“colspan” 去实现：

代码如下：

            <table border="1" style="width: 100%">

                <tr>
                    <th>aaaaaa</th>
                    <th>aaaaaa</th>
                    <th>aaaaaa</th>
                    <th>aaaaaa</th>
                    <th>aaaaaa</th>
                    <th>aaaaaa</th>
                    <th>aaaaaa</th>
                    <th>aaaaaa</th>
                </tr>
                <tr>
                    <td>aaaaaa</td>
                    <td>aaaaaa</td>
                    <td colspan="3">aaaaaa</td>
                    <td colspan="3">aaaaaa</td>
                </tr>
                <tr>
                    <td>aaaaaa</td>
                    <td>aaaaaa</td>
                    <td colspan="1">aaaaaa</td>
                    <td colspan="5">aaaaaa</td>
                </tr>
                <tr>
                    <td>aaaaaa</td>
                    <td>aaaaaa</td>
                    <td colspan="3">aaaaaa</td>
                    <td colspan="3">aaaaaa</td>
                </tr>
            </table>

结果如下：

另外，如果你不想加header， 我建议你不使用table，使用Bootstrap去实现类似的效果：

代码如下：

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <div >
            <div class="row">
                <div class="col-xs-3 col-md-3" style="background-color: aquamarine; border: 1px">AAAA</div>
                <div class="col-xs-3 col-md-3" style="background-color: lavender; border: 1px">AAAA</div>
                <div class="col-xs-3 col-md-3" style="background-color: aquamarine; border: 1px">AAAA</div>
                <div class="col-xs-3 col-md-3" style="background-color: lavender; border: 1px">AAAA</div>
            </div>
            <div class="row">
                <div class="col-xs-3 col-md-3" style="background-color: aquamarine; border: 1px">AAAA</div>
                <div class="col-xs-3 col-md-3" style="background-color: lavender; border: 1px">AAAA</div>
                <div class="col-xs-1 col-md-1" style="background-color: aquamarine; border: 1px">AAAA</div>
                <div class="col-xs-5 col-md-5" style="background-color: lavender; border: 1px">AAAA</div>
            </div>
            <div class="row" style="background-color: lightcyan;">
                <div class="col-xs-3 col-md-3" style="background-color: aquamarine; border: 1px">AAAA</div>
                <div class="col-xs-3 col-md-3" style="background-color: lavender; border: 1px">AAAA</div>
                <div class="col-xs-3 col-md-3" style="background-color: aquamarine; border: 1px">AAAA</div>
                <div class="col-xs-3 col-md-3" style="background-color: lavender; border: 1px">AAAA</div>
            </div>
        </div>

结果如图所示：

更多有关bootstrap的用法，请参考： http://www.w3cschool.cn/bootstrap/