Html-如何正确给table加边框

　

table边框

总结一下table的使用给页面一些布局带来方便

遇到有边框的类似表格这样的布局，你就可以考虑用table布局了，这样就省去你特殊设置边框…而且table可以根据内容自适应哦

1.html

    <table>
            <caption>缩放你的浏览器查看表格的响应式效果！</caption>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$162,700</td>
                </tr>
                <tr>
                    <td>Angelica Ramos</td>
                    <td>Chief Executive Officer (CEO)</td>
                    <td>London</td>
                    <td>47</td>
                    <td>2009/10/09</td>
                    <td>$1,200,000</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
                <tr>
                    <td>Bradley Greer</td>
                    <td>Software Engineer</td>
                    <td>London</td>
                    <td>41</td>
                    <td>2012/10/13</td>
                    <td>$132,000</td>
                </tr>
                <tr>
                    <td>Brenden Wagner</td>
                    <td>Software Engineer</td>
                    <td>San Francisco</td>
                    <td>28</td>
                    <td>2011/06/07</td>
                    <td>$206,850</td>
                </tr>
                <tr>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                </tr>
                <tr>
                    <td>Bruno Nash</td>
                    <td>Software Engineer</td>
                    <td>London</td>
                    <td>38</td>
                    <td>2011/05/03</td>
                    <td>$163,500</td>
                </tr>
                <tr>
                    <td>Caesar Vance</td>
                    <td>Pre-Sales Support</td>
                    <td>New York</td>
                    <td>21</td>
                    <td>2011/12/12</td>
                    <td>$106,450</td>
                </tr>
                <tr>
                    <td>Cara Stevens</td>
                    <td>Sales Assistant</td>
                    <td>New York</td>
                    <td>46</td>
                    <td>2011/12/06</td>
                    <td>$145,600</td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$433,060</td>
                </tr>
            </tbody>
        </table>

2.css

       table {
            width: 100%;
            font-size: .938em;
            border-collapse: collapse;/*边框会合并为一个单一的边框*/
        }
        caption {
            margin: 1em 0 .7em 0;
            text-align: center;
            font-weight: bold;
            font-size: 120%;
            letter-spacing: .5px;
            color: #fff;
        }

        th {
            text-align: left;
            padding: .5em .5em;
            font-weight: bold;
            background: #66677c;color: #fff;
        }

        td {
            padding: .5em .5em;
            border-bottom: solid 1px #ccc;
        }

        table,table tr th, table tr td { border:1px solid #0094ff; }/*设置边框的*/

3.运行结果：

主要是

border-collapse: collapse;（边框会合并为一个单一的边框）

table,table tr th, table tr td { border:1px solid #0094ff; }（设置边框的）

其他的可以自己根据公司要求微调~~~

相关阅读

小米如何让用户尖叫（上）：扁平化和粉丝营销真相

2011年8月19日，在北京车库咖啡的一个论坛上，面对网友“国产山寨货”的质疑，雷军掏出手机，当众示范了摔手机。另两位小米联合创始人黎

超全面设计指南：如何做大屏数据可视化设计？

数据可视化是一门庞大系统的科学，本文所有讨论仅针对大屏数据可视化这一特定领域。管中窥豹，如有遗漏或不足之处欢迎大家讨论交流。

作为产品经理你如何设计产品？

来公司3个月，针对这期间的工作，关于产品设计的过程与经验，做一个小结。1、业务理解作为一名产品，对公司的业务体系首先要有认识和了解

淘宝怎么买微博账号?如何绑定微博和淘宝账号?

淘宝怎么买微博账号?如何绑定微博和淘宝账号?淘宝是个万能的东西，基本什么都可以买的到，连微博账号都可购买，接下来seo实验室小编教

淘宝如何开通超级店长?

今天小编要来给各位分析的内容是跟淘宝超级店长相关的，因为开通了之后，会让大家拥有更多的功能，如果你也想了解的话，那就跟上小编我的