分享一个利用css来设置表格单元格等宽的实例代码
程序员文章站
2022-04-19 11:56:57
...
htmlcss tablelayout: fixed 设置表格单元格等宽，下面小编就来和大家分享一下。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>设置表格单元格等宽</title>
<style type="text/css">
/*
使字体在所有设备上都达到最佳的显示
*/
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/*
给body添加阴影
*/
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
/*
表格单元格等宽
*/
.calendar { table-layout: fixed; }
</style>
</head>
<body>
<table width="100%" border="1" class="calendar">
<tr>
<td>我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试</td>
<td>122222222222222</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
以上就是分享一个利用css来设置表格单元格等宽的实例代码的详细内容，更多请关注其它相关文章！