当前位置：Gxlcms > css > css使用table-layout:fixed来设置表格单元格等宽的示例代码

css使用table-layout:fixed来设置表格单元格等宽的示例代码

时间：2021-07-01 10:21:17 帮助过：27人阅读

使用 table-layout: 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>

以上就是css使用table-layout: fixed来设置表格单元格等宽的示例代码的详细内容，更多请关注Gxl网其它相关文章！

css使用table-layout:fixed来设置表格单元格等宽的示例代码

人气教程排行