Rumah > Artikel > hujung hadapan web > 分享一个利用css来设置表格单元格等宽的实例代码
分享一个利用css来设置表格单元格等宽的实例代码
- 零下一度asal
- 2017-05-08 13:55:063895semak imbas
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在线手册
Atas ialah kandungan terperinci 分享一个利用css来设置表格单元格等宽的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：你所不知道的CSS浮动小知识Artikel seterusnya：css3中新单位（vw ）的详解