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

 我来答
learneroner
高粉答主

2015-05-26 · 关注我不会让你失望
知道大有可为答主
回答量:1.1万
采纳率:91%
帮助的人:6567万
展开全部

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

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

示例如下:

  1. 给出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>
  2. 设置单元格高度和宽度样式

    table{border-collapse:collapse;}
    td{
    border: 1px solid green; /*边框*/
    width:100px;             /*单元格宽度*/
    height:50px;             /*单元格高度*/
    text-align:center;       /*单元格文字居中对齐*/
    }
  3. 效果如下

百度网友6b46965
2015-05-22 · TA获得超过5583个赞
知道小有建树答主
回答量:957
采纳率:84%
帮助的人:424万
展开全部
<table>
<tr>
<td class="tdClass"></td></tr>
</table>

<style type="text/css">
.tdClass{width:50px;height:20px;}
</style>

试试这个,里面的宽度和高度都可以设置的奥



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS表格确定单行或列的宽度和高度的代码设置实例-www.baike369.com</title>
<style type="text/css">
<!--
.td1
{
  width:300px;
}
.td2
{
  width:200px;

.td3
{
  height:100px;
}
.td4
{
  height:50px;
}
table
{
  width:500px;
  height:150px;
  border:2px solid #000;
  margin:0 0 20px;
}
td
{
  border:1px solid #999;
}
-->
</style>
</head>
<body>
  <table>
    <tr>
      <td class="td1">这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td></tr>
    <tr>
      <td class="td2">这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td>
    </tr>
  </table>
  <table>
    <tr>
      <td class="td3">这里是表格中的内容部分</td>
      <td class="td4">这里是表格中的内容部分</td></tr>
    <tr>
      <td>这里是表格中的内容部分</td>
      <td>这里是表格中的内容部分</td>
    </tr>
  </table>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
jinse2000
2009-05-25 · 超过34用户采纳过TA的回答
知道小有建树答主
回答量:174
采纳率:0%
帮助的人:97.4万
展开全部
SELECT{
color:#555555;
FONT-SIZE: 12px;
HEIGHT: 20px;
}
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2009-05-25
展开全部
<table>
<tr>
<td class="tdClass"></td></tr>
</table>

<style type="text/css">
.tdClass{width:50px;height:20px;}
</style>

就可以了啊
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式