首頁  >  文章  >  web前端  >  css使用table-layout: fixed來設定表格單元格等寬的範例程式碼

css使用table-layout: fixed來設定表格單元格等寬的範例程式碼

黄舟
黄舟原創
2017-06-30 13:39:181800瀏覽

使用 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