Html-如何正确给table加边框

总结一下table的使用给页面一些布局带来方便
遇到有边框的类似表格这样的布局，你就可以考虑用table布局了，这样就省去你特殊设置边框…而且table可以根据内容自适应哦
1.html

    <table>
            <caption>缩放你的浏览器查看表格的响应式效果！caption>
            <thead>
                <tr>
                    <th>Nameth>
                    <th>Positionth>
                    <th>Officeth>
                    <th>Ageth>
                    <th>Start dateth>
                    <th>Salaryth>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>Airi Satoutd>
                    <td>Accountanttd>
                    <td>Tokyotd>
                    <td>33td>
                    <td>2008/11/28td>
                    <td>$162,700td>
                tr>
                <tr>
                    <td>Angelica Ramostd>
                    <td>Chief Executive Officer (CEO)td>
                    <td>Londontd>
                    <td>47td>
                    <td>2009/10/09td>
                    <td>$1,200,000td>
                tr>
                <tr>
                    <td>Ashton Coxtd>
                    <td>Junior Technical Authortd>
                    <td>San Franciscotd>
                    <td>66td>
                    <td>2009/01/12td>
                    <td>$86,000td>
                tr>
                <tr>
                    <td>Bradley Greertd>
                    <td>Software Engineertd>
                    <td>Londontd>
                    <td>41td>
                    <td>2012/10/13td>
                    <td>$132,000td>
                tr>
                <tr>
                    <td>Brenden Wagnertd>
                    <td>Software Engineertd>
                    <td>San Franciscotd>
                    <td>28td>
                    <td>2011/06/07td>
                    <td>$206,850td>
                tr>
                <tr>
                    <td>Brielle Williamsontd>
                    <td>Integration Specialisttd>
                    <td>New Yorktd>
                    <td>61td>
                    <td>2012/12/02td>
                    <td>$372,000td>
                tr>
                <tr>
                    <td>Bruno Nashtd>
                    <td>Software Engineertd>
                    <td>Londontd>
                    <td>38td>
                    <td>2011/05/03td>
                    <td>$163,500td>
                tr>
                <tr>
                    <td>Caesar Vancetd>
                    <td>Pre-Sales Supporttd>
                    <td>New Yorktd>
                    <td>21td>
                    <td>2011/12/12td>
                    <td>$106,450td>
                tr>
                <tr>
                    <td>Cara Stevenstd>
                    <td>Sales Assistanttd>
                    <td>New Yorktd>
                    <td>46td>
                    <td>2011/12/06td>
                    <td>$145,600td>
                tr>
                <tr>
                    <td>Cedric Kellytd>
                    <td>Senior Javascript Developertd>
                    <td>Edinburghtd>
                    <td>22td>
                    <td>2012/03/29td>
                    <td>$433,060td>
                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; }（设置边框的）
其他的可以自己根据公司要求微调~~~