none
表格的css 怎么修改 RRS feed

  • 问题

  •         <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>的样式变成如下图的???? 
    就是把第二行的最后一格拉宽,
     本人菜鸟一个,请求大神帮助

    2017年3月10日 9:14

全部回复

  • 你好,

    你可以为这个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/


    • 已编辑 Zhi Lv 2017年3月23日 8:22
    • 已建议为答案 Zhi Lv 2017年4月5日 9:58
    2017年3月23日 8:21