table中如何用CSS控制<tr>><td>的宽度和高度

Posted 2023-03-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table中如何用CSS控制<tr>><td>的宽度和高度相关的知识，希望对你有一定的参考价值。

1、首先给table标签添加css : table-layout:fixed;这里是为了让整个table有一个自己宽度，而不是让table自己随着自己内容的大小而改变。

2、给table标签，定一个宽度（如：width:500px）;

3、最后给td 定一个宽度（width）就可以实现.

原表格：

添加一下CSS：

现表格：

扩展资料：

在实际需求中，经常遇到要在table中的td中，让用户输入比较长的字符串，这时就要使td的宽度能较大。

在WEB前端中，对于表格元素中的元素td 直接设置宽度是无法生效的。要想达到给td设置宽度的目地。

参考技术A

单独的一个table的高度，代码如下：

.main td height:30px; border:#CCCCCC 1px solid;

</style>

<tr>

</tr>

<tr>

</tr>

</table>

.main td的意思是指定main类下的td，同理也可以指定tr。这样的做法只能针对了设定main类的表格。

如果想要所有的table都是同一个高度样式可以这样写：

扩展资料：

注意的是table前不要加点，因为它不是类名，而是html元素。

TD属性height ：设置单元格的高度。HTML4.01中已经废弃，HTML5不支持。

在CSS中height属性具有以下的取值：

auto ：默认。浏览器会计算出实际的高度。

length ：使用 px、cm 等单位定义高度。

% ：基于包含它的块级对象的百分比高度。

inherit ：规定应该从父元素继承 height 属性的值。

参考资料：百度百科——css表格

参考技术B

table中控制<tr>><td>的宽度和高度的代码：

.main td height:30px; border:#CCCCCC 1px solid;

</style>

<tr>

</tr>

<tr>

</tr>

</table>

扩展资料

〈table〉...〈/table〉 - 定义表格

〈th〉 - 定义表头 Defines a table header

〈tr〉 - 定义表行 Defines a table row

〈td〉 - 定义表元(表格的具体数据) td stands for "table data," Defines a table cell.

</table>

〈table border cellspacing=#〉

参考资料：百度百科 table

参考技术C

给table设置一个mian

代码如下

.main td height:30px; border:#CCCCCC 1px solid;

</style>

<tr>

</tr>

<tr>

</tr>

</table>

.main td的意思是指定main类下的td，同理也可以指定tr

这样的做法只能针对了设定main类的表格，若是想要所有的表格都是同一个高度样式可以这样写

table td height:30px; border:#CCCCCC 1px solid;

</style>

注意的是table前不要加点，因为他不是类名，而是html元素

关于html中table表格tr,td的高度和宽度

1、table中的width和height设置及其作用：table中设置的height其实是设置个最小值，也就是当表格中的内容或者行高总值超过这个设置值时，会自动延长表格的height值，当表格中的内容或者行高没有达到这个值时，会自动扩大到这个值。table中设置的width值一般为表格宽度的最大值，不能改变，即使内部的内容宽度超过也不能改变。（这个内部内容如果是图片的话是可以改变表格宽度的。）

2、tr标签中width和height设置及其作用：tr标签里面的width设置不起任何作用，因为从第一点可以看出，表格的width是不能改变的，tr标签当然就不起作用了。所以在tr中只有讨论height设置的可能了，tr中的height设置和几个tr之间的设置有关。

当几个tr都设置了height的具体数值时，各个tr的height按照设置的值的比例来分配总的height值，注意这里说的是总的height值。

当几个tr都没有设置height具体值时，平均分配总的height值。当有的tr设置了具体的数值，有的没有设置具体的数值为默认时，先保证各个tr的基本需要，剩下的再满足设置了具体值的tr，之后再全部给没有设置具体值的tr。

最后一种情况还要考虑总的宽度不够tr总的设置值的情况，不够的话要满足tr的基本需要，这里会自动延长表格的height的。然后再考虑设置了height的tr，最后考虑没有设置height的tr。

3、td标签中width和height设置及其作用：td标签里面的width和height都是起作用的。先看td的width吧，某一个td的width是和所处的一列每个td的width都相关的，取其中最大的width作为这一列中每个td的width，这点是让我们最混淆的地方，一定要从全局把握某个td的width，不能从这一个的width设置就断言它的宽度就是多少，这样是不准确的。

参考技术D table中用CSS控制<tr>><td>的宽度和高度，首先我们需要给tr和td一个style，然后通过这个style来控制它的width和height就可以了，这里通过具体的代码来理解：
<html>
<head>
</head>
<body>
<table>
<tr style="width:200px; height:100px;">
<td style="width100px; height50px;">我i是测试文字</td>
</tr>
</table>
</body>
</html>
这样就实现了对tr和td的控制。

如何用css排版table

能不能提供个可以学习的地址

举个例子吧，不懂再问我
table
border: 0;
font-family: arial;
font-size:14px;

th
background-color:yellow;

td
border-bottom:1 solid #000000;

.fail
color:#FF0000;

<table>
<tr>
<th>学生</th>
<th>分数</th>
</tr>
<tr>
<td>Stella</td>
<td>85</td>
</tr>
<tr>
<td>Sophie</td>
<td>95</td>
</tr>
<tr>
<td>Alice</td>
<td class="fail">55</td>
</tr>
</table>

参考资料：http://www.w3school.com.cn/css/css_table.asp

参考技术A 这个问题和用css排版其他标签时一样的。。。
给table的属性里也加一个class 或者 id 然后再css里写样式
然后table的每行每列，也可以加class 或者id ，并对其进行样式描述参考技术B 你这么问就像问
如何修车一样
让人怎么回答呢？

以上是关于table中如何用CSS控制<tr>><td>的宽度和高度的主要内容，如果未能解决你的问题，请参考以下文章

如何用css排版table

静态网页中如何用js实现搜索功能？

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

java web 中如何用一个动态的table表接受数据库中的数据

页面上有个<table>表格,如何用JS中的循环分别取得各个td中的数据

如何用js向table中写入内容