如何用CSS 定制表格单元格的宽度和高度

CSS中宽度和高度分别可以通过width和height实现，那么对于单元格的宽度和高度，则可以通过如下样式来设置

td{ width:100px; height:50px;} /设置单元格宽度100px，高度50px/

示例如下：

给出HTML元素

<table>

<tr><td>1</td><td>2</td><td>345</td></tr>

<tr><td>6789</td><td>10</td><td>11</td></tr>

</table>

设置单元格高度和宽度样式

table{border-collapse:collapse;}

td{

border: 1px solid green; /边框/

width:100px;             /单元格宽度/

height:50px;             /单元格高度/

text-align:center;       /单元格文字居中对齐/

}

效果如下

首先学习一下width属性的定义和用法：

定义和用法

width 属性设置元素的宽度。

说明

这个属性定义元素内容区的宽度，在内容区外面可以增加内边距、边框和外边距。

行内非替换元素会忽略这个属性。

可以通过width属性设置li中字段的宽度根据实际长度显示宽度。在li的样式中加上width:auto;就可以实现了；现在来看下面一段代码：

CSS样式设置：

#info_main{text-align:center; border:1px solid #CCC;width:620px;}

#info_main li{width:auto;float:left;margin:0px 8px; padding:0px;border:1px solid #CCC;}

网页代码：

 <div id="info_main">

<ul>

<li>时间：{dede:field name='pubdate' function='strftime("%Y-%m-%d %H:%M","@me")' /}</li>

<li>来源：{dede:fieldsource/}</li>

<li>作者:{dede:fieldwriter/}</li>

<li>点击:<script src="{dede:field name='phpurl'/}/countphpview=yes&aid={dede:field name='id'/}&mid={dede:field name='mid'/}" type='text/javascript' language="javascript"></script>次</li>

</ul>

</div>

自适应一般用百分比或em来做宽度单位，开发难度比固定宽度大。比如有个导航条，用固定宽度宽1200px，那么你去手机上看，由于屏幕宽度不够，有两个选择：

出现横向滚动条，要浏览者左右滑动

整个页面缩放到宽度和手机分辨率一样，那么，文字、链接什么的也缩小到了阅读点击困难的尺寸，需要不停放大页面和缩小页面来观看

然后用自适应来做这个导航条，总宽度设为100%，里面有5个按钮，每个宽度设为20%，它就会根据屏幕尺寸缩放，再用css媒体查询去判断，当宽度太小时，5个按钮就不再横着一排，而变成竖着排列，或再复杂点加上js，让整个导航栏变成一个菜单按钮，按了再d出5个链接按钮。

那么，导航栏可以这样控制，页面其他内容也可以这样控制，于是你同一个页面在电脑、平板、手机上看，都可以有不同的版式来适合当前设备。

你可以百度下css媒体查询、自适应布局方面的教程看看，另外：记住百分比是用在宽度上，高度上你还是忘了百分比吧。