• 微信
当前位置:首页 >> 建站学院 >> Web前端

如何写一个能够实现自适应的html表格

作者:玄北 时间:2021-10-05 阅读数:238人阅读
如何写一个能够实现自适应的html表格

直接上代码:

<!DOCTYPE html>    
<html lang="zh-cn">    
<head>    
<title>Table_Simple CSS for HTML tables</title>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1">    
<style type="text/css">    
.pure-table {    
border-collapse: collapse;    
border-spacing: 0;    
empty-cells: show;    
border: 1px solid #cbcbcb;    
width: 100%;    
}    
.pure-table caption {    
color: #000;    
font: italic 85%/1 arial, sans-serif;    
padding: 1em 0;    
text-align: center;    
}    
.pure-table td,    
.pure-table th {    
border-left: 1px solid #cbcbcb;    
border-width: 0 0 0 1px;    
font-size: inherit;    
margin: 0;    
overflow: visible;    
padding: 0.1em 0.1em;    
background-color: transparent;    
word-break: break-all;    
}    
.pure-table thead {    
background-color: #e0e0e0;    
color: #000;    
text-align: left;    
vertical-align: bottom;    
}    
.pure-table-odd td {    
background-color: #f2f2f2;    
}    
</style>    
</head>    
<body>    
<table class="pure-table">    
<thead>    
<tr>    
<th>id</th>    
<th>name</th>    
<th>url</th>    
<th>sort</th>    
<th>country</th>    
</tr>    
</thead>    
<tbody>    
<tr class="pure-table-odd">    
<td>1</td>    
<td>玄北博客</td>    
<td>https://www.xuanbeiweb.cn</td>    
<td>9</td>    
<td>中国</td>    
</tr>    
<tr>    
<td>2</td>    
<td>淘宝<br /> </td>    
<td>https://www.taobao.com</td>    
<td>5</td>    
<td>中国</td>    
</tr>    
<tr class="pure-table-odd">    
<td>3</td>    
<td>google</td>    
<td>https://www.google.com/</td>    
<td>11</td>    
<td>美国</td>    
</tr>    
<tr>    
<td>4</td>    
<td>95网络</td>    
<td>http://www.995w.com</td>    
<td>3</td>    
<td>中国</td>    
</tr>    
<tr class="pure-table-odd">    
<td>5</td>    
<td>Facebook</td>    
<td>https://www.facebook.com</td>    
<td>8</td>    
<td>美国</td>    
</tr>    
</tbody>    
</table>    
</body>    
</html>
转载请注明——本文源自【玄北博客】www.xuanbeiweb.cn

免责声明:本站部分文章、数据、图片来自互联网,

如果侵犯了你的权益请来信告知我们删除,否则不承担相应法律责任。邮箱:xuanbei@xuanbeiweb.cn

标签:
玄北头像

玄北

Hi~如果您正好看到这里,可以扫一扫微信二维码加我为好友,我是一个喜欢交朋友的人,我知道您也是哦~

玄北微信

发表评论:

评论记录:

暂无评论——欢迎您的点评!