html中怎么在CSS中设置TABLE的每一个TD的不同宽度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html中怎么在CSS中设置TABLE的每一个TD的不同宽度相关的知识,希望对你有一定的参考价值。

现在有张表table1,只知道table1的ID属性,表格内的TR和TD都是通过查询直接生成的无法操作,请问怎么用CSS来设置table1的每一个TD的宽度。

html页面中,定义table表格中每个TD的宽度,可以使用内联样式定义。
设置方法如下:
1、用table 标签定义了表格宽度;
2、用td 标签定义了单元格宽度。
此时整个表格的每个单元格宽度都会设置成功。
如下案例:
<!DOCTYPE html>
<html>
<head>
<title>表格边框宽度</title>
<style>
<!-- 定义表格宽度及样式-->
table
text-align:center;
width:500px;
border-width:6px;
border-style:double;
color:blue;

<!-- 定义单元格宽度及样式 -->
td
width:158px;
border-width:3px;
border-style:dashed;

</style>

</head>
<body>
<table border=1 cellspacing="3" cellpadding="0">
<tr>
<td>姓名</td>
<td class=tds>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>31</td>
</tr>
<tr>
<td>李四 </td>
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
</html>
参考技术A 每个单元格单独设置:<td style='width:200px'></td><td tyle='width:100px'></td>
<style>
.awidth:200px;
.bwidth:100px;
</style>
<td class=a></td><td class=b></td>
参考技术B 我也是新手额,不太理解您的意思

我是在dreamweaver里面做的,
直接选中td然后点CSS那边增加样式,然后填一下宽度就行了
我新建一个拉了一个表格,您看下,主要设置的就这里body table tr td width: 200px;

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body table tr td
width: 200px;

</style>
</head>

<body><table width="200" border="1">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

</body>
</html>本回答被提问者和网友采纳
参考技术C 使用colspan 参考技术D 给TD加样试就OK了

css中设置table中的td内容自动换行

在项目中,有用到表格。因为有的内容比较长,所以需要列宽大一些,有的内容比较短,列宽就小一些。遇到了一个问题,在学校联系方式表里面,联系人电话/电子邮件这两列,无论我加多大的宽度,内容总是会把表格列撑的很宽,百度了一下,发现原因是这样的:

一般字母的话会被浏览器默认是一个字符串或者说一个单词,所以不会自动换行

所以需要设置一下,让表格内容自动换行。
1.在中设置样式style为word-wrap:break-word;word-break:break-all;(一般情况只需要设置word-break:break-all即可,但是有时候需要加word-wrap:break-word )
2.把表格的sytle的table-layout:fixed,就是表格固定宽度,就是表格既要自适应他外面的容器,也不要撑出去,然后设置td的word-wrap:break-word;换行,问题就解决了

以上是关于html中怎么在CSS中设置TABLE的每一个TD的不同宽度的主要内容,如果未能解决你的问题,请参考以下文章

css中设置table中的td内容自动换行

在表格table的中设置td最小宽度

HTML中table与td之间的距离怎么设置?

为啥Html中在table标签中设置居中并不显示居中,在单个tr标签中设置才显示居中

如何使用css让td中的文字自动换行

如何使用css让td中的文字自动换行