html中的table表格样式

时间：2022-11-20 10:38:15
设置个这样的table要求和页面大小一致，table内个列成百分比分配
html中的table表格样式

5 个解决方案

#1



<!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>

#2

引用 1 楼 fzfei2 的回复: 


<!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>



Thank you ，谢谢大侠真是帮大忙了。

#3

引用 1 楼 fzfei2 的回复: 


<!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我想用这个样式怎么弄？

#4

但是我现在有两个table的时候第二table我不想用这个样式怎么弄？

#5

引用 4 楼 pang68599 的回复:
但是我现在有两个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>

#1



<!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>

#2

引用 1 楼 fzfei2 的回复: 


<!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>



Thank you ，谢谢大侠真是帮大忙了。

#3

引用 1 楼 fzfei2 的回复: 


<!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我想用这个样式怎么弄？

#4

但是我现在有两个table的时候第二table我不想用这个样式怎么弄？

#5

引用 4 楼 pang68599 的回复:
但是我现在有两个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>
标签：

相关文章