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来设置表格单元格等宽的实例代码的详细内容。更多信息请关注PHP中文网其他相关文章!