百韵网 >> 正文

table中如何用CSS控制<tr>><td>的宽度和高度 HTML+CSS 怎样控制<table>标签里面<tr><t...

来源：www.baiyundou.net 日期：较早时间

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

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

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

原表格：

添加一下CSS：

现表格：

扩展资料：

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

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

单独的一个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表格

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

给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元素

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的控制。

HTML+CSS 怎样控制<table>标签里面<tr><td>的边长~

一般来说有两用做法
1.使用div，li，a等元素定好位置之后，使用css中的active或者hover等方式改变元素的border的宽度和颜色，这种可以根据文字的大小改变大小。
2.使用本问题的table，可以实现定义好大小，然后再用上述的css方式处理边框。

采用示例说明：
单元格宽度演示 td.kuan{width:200;}td.zai{width:50;} 这是宽的单元格这是窄的单元格实际运行效果如下图：

相关要点总结：

15624136180：css样式控制表格单元格的距离
费冠答：可以应用border-spacing属性设置到表中。border-collapse 默认值为separate，即每个td单元格都有独立的边框；collapse表示相邻单元格共用一个边框，此时 border-spacing 将不起作用，设置为collapse单元格间距将消失。

15624136180：Css中控制table单元格的间距
费冠答：1、设置表格的边框。在CSS中，可以通过border来设置表格或单元格的边框及其边框颜色，例如，下面设置表格为1px的蓝色边框。2、在table表格里，默认是显示两个边框线的，如果要设置成一条边框，在CSS中需要使用border-collapse设置为collapse，合并为一条边框。3、CSS设置表格的宽度和高度，使用width宽度和hei...

15624136180：HTML+CSS 怎样控制<table>标签里面<tr><td>的边长
费冠答：1.使用div，li，a等元素定好位置之后，使用css中的active或者hover等方式改变元素的border的宽度和颜色，这种可以根据文字的大小改变大小。2.使用本问题的table，可以实现定义好大小，然后再用上述的css方式处理边框。

15624136180：如何利用CSS控制表格宽度不随插入内容的撑大?(内容不超过DIV高度)设置cs...
费冠答：table中的td如果你不定义宽度，采用默认的方式，那么在你输入内容的时候会发现有内容的占比较大，没内容的占很小，一般标准的，都应该设置宽度,比如td{width:100px;}

15624136180：表格里面的边框颜色CSS怎么控制
费冠答：回答：.baoxiu_ck_k1 td{border:1px solid #F00;}

15624136180：table用CSS控制怎么实现
费冠答：你最好给你的table加一个类名。比如<table class="table_A">，<table class="table_B">。否则你写在一个页面里的两个样式若有重复，则只有后面的定义起作用，例如宽度。最严重的是，你所画的所有引用该样式的页面的所有table都是一个样子。第一个:table.table_A{width:100%;border:none;border...

15624136180：css怎么控制表格的边框粗细,还要显示线条和颜色
费冠答：可以通过设置单元格元素td的边框样式来实现：border: width style color; /*分别设置边框的粗细、样式和颜色*/示例如下：在HTML代码中给出两个表格 <table class="tb1"><tr><td>有</td><td>志</td><td>者</td></tr><tr><td>事</td><td>竟</td><td>成</td></tr></table><...

15624136180：用css 控制多行的table(行数不确定),隔行换色能实现吗?求高手指点_百 ...
费冠答：用js实现吧，给tr一个id：(document).ready(function() { var objs=$("#tab1 tr");for (var i=0;i<objs.length;i++){ ("#"+objs[i].id).css("background",(i%2==0)? 'red' : 'white');} });如果是不同的颜色，就把颜色放到一个数组里面，在循环中从里面取颜色就行了 ...

15624136180：如何用css实现表格第一列固定其余内容横向滚动
费冠答：tr>td:last-child").css("left", $("#div_abroad").offset().left + $("#div_abroad").width() - $("#table td:last-child").width()); //因为第一,二和最后一个设置定位了,所以table里缺少了3列造成滚动条不足,所以要为table补充3列,补充位置有要求,必须在第二列的后面补上第一,第二列。

15624136180：请用CSS控制<table>元素方法画出表格
费冠答：border="0" cellpadding="1" 然后边框颜色就是table的background-color 另外bgcolor不是w3c规范，最好不要用

（编辑：本站网友）