PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

黄舟
黄舟 原创
2017-06-30 13:39:18 1496浏览

使用 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来设置表格单元格等宽的示例代码的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。