Html-如何正确给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>
html网页设计 table <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>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
3.运⾏结果：
主要是
border-collapse: collapse;（边框会合并为⼀个单⼀的边框）
table,table tr th, table tr td { border:1px solid #0094ff; }（设置边框的） 其他的可以⾃⼰根据公司要求微调~~~      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 ; }/*设置边框的*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。