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设置宽度的目地。

温馨提示:答案为网友推荐,仅供参考
第1个回答  推荐于2019-11-17

单独的一个table的高度,代码如下:

<style type="text/css">

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

</style>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="main">

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

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

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

<style type="text/css">
table td{ height:30px; border:#CCCCCC 1px solid;}
</style>

扩展资料:

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

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

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

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

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

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

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

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

本回答被网友采纳
第2个回答  推荐于2019-11-05

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

<style type="text/css">

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

</style>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="main">

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

</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 border width=170 height=100>

</table>

〈table border cellspacing=#〉

参考资料:百度百科 table

本回答被网友采纳
第3个回答  推荐于2019-10-05

给table设置一个mian

代码如下

<style type="text/css">

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

</style>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="main">

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

<td> </td>

</tr>

</table>

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

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

<style type="text/css">

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设置就断言它的宽度就是多少,这样是不准确的。

本回答被网友采纳
第4个回答  推荐于2017-09-24
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的控制。
相似回答