首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

html中的table报表样式

2013-08-26 
html中的table表格样式设置个这样的table要求和页面大小一致,table内个列成百分比分配[解决办法]!DOCTYPE

html中的table表格样式
设置个这样的table要求和页面大小一致,table内个列成百分比分配
html中的table报表样式
[解决办法]


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
  body,html{margin:0;padding:0;width:100%;}
  table{    
   border-collapse:collapse;
   border:2px solid #000;    
   }
  th{
 border-bottom:2px solid #000;   
  }
    
</style>
</head>
<body>
  <table width="100%"   >
  <tr>
    <th > title1  </th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td  >&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 
  <tr>
    <td >&nbsp; </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
</body>
</html>

[解决办法]
引用:
但是我现在有两个table的时候第二table我不想用这个样式怎么弄?

加个样式名 t1

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
  body,html{margin:0;padding:0;width:100%;}
  table.t1{    
   border-collapse:collapse;
   border:2px solid #000;    
   }
  .t1 th{


 border-bottom:2px solid #000;   
  }
    
</style>
</head>
<body>
<table width="100%" class="t1" >
  <tr>
    <th > title1  </th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 
  <tr>
    <td >&nbsp; </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<br/>
<table width="100%" border=1 >
  <tr>
    <th > title1  </th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
 
  <tr>
    <td >&nbsp; </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
</body>
</html>

热点排行