CSS_td标签中的colspan

最新推荐文章于 2024-05-15 13:55:28 发布
最新推荐文章于 2024-05-15 13:55:28 发布
阅读量5.7k 收藏
点赞数
分类专栏： 结构与样式 文章标签： css 浏览器 测试 ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trace332/article/details/4152873
版权

最近做了一些表单,内容很多,在td标签中使用了不少的colspan,测试后发现有些问题.

        比如在CSS中定义好td { width:80px;},这样一个<td colspan = '3'>的格子width应该是240px.填写一些内容,在FF中是正常的,浏览器会智能地把这个td当成三个打通了的格子.但IE中就惨了,浏览器把这个colspan = '3'的格子依旧认作一个格子,文字到了80px的地方就会自动换行了.晕啊.

暂时用了两个解决办法:

   1.在内容上添加<nobr></nobr>标签;

   2.在td上设置width = 'n px'

不知道有没有其它的好办法.

trace332
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中border和colspan
weirdowang的博客
05-02 4239
colspan的定义用法：colspan 属性规定单元格可横跨的列数。&lt;td colspan="value"&gt;示例代码：&lt;html&gt;&lt;body&gt;&lt;table width="100%" border="1"&gt;  &lt;tr&gt;    &lt;th&gt;Month&lt;/th&gt; 
CSS基础学习01
m0_60830137的博客
08-19 118
1. 什么是CSS CSS叫层叠样式表(Cascading Style Sheets) 它是用来定义html元素的显示样式用的 HTML标记是用来显示内容，至于这个内容长成什么样子HTML元素无法再进一步控制 CSS被用来进一步控制html元素的具体显示样子 有HTML的时候一定会有CSS对其内容进行修饰 2.如何在html文件中使用css? 2.1.内联定义 (Inline Styles) 在html元素的开始标记中通过style属性来为当前的html元素设置样式 格式: <ht
CSS合并单元格四种方式：table/display/flex/grid
weixin_43932309的博客
07-12 1万+
CSS合并单元格四种方式：table/display/flex/grid。
CSS 基础教程：表格（三）
最新发布
m0_65012566的博客
05-15 101
属性设置<th>或<td>中内容的垂直对齐方式。注意：默认情况下，<th>和<td>元素内容的垂直对齐是中间的。下面是一个将垂直对齐设置为顶部的示例：border;table;width;tdheight;;
CSS表格中的一些属性
Keep_Trying_Go的博客
11-22 369
7.colspan:表格单元横跨两列的表格： <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan="2">January</td> </tr> <tr> <td colspan="2">Februa
在外部CSS中实现Table td的colspan
weixin_33826268的博客
04-21 433
个人感觉Table布局一直都是比较麻烦的 前阵子有个客户需求，要把下面代码中的colspan=3去掉，在外部css中定义 &lt;table border="2px"&gt;    &lt;tr&gt;        &lt;td colspan="3" &gt;            table content        &lt;/td&gt;    &lt;/tr&gt;   
td 设置colspan之后设置td width 无效
zcaixx的博客
10-23 1740
table设置了colspan之后出现td宽度显示不正常，这种情况下，可以通过设置table width=“100%”table-layout=“fixed” 解决,当JS动态设置tr的隐藏（即style.display = ‘’）无效时也可以试试，因为我试过style.display = ‘inline’，但是显示时colspan属性失效了，给table加上 width=“100%”table-...
浅谈html5标签css3的常用样式
09-27
`<td>`的`colspan`和`rowspan`属性用于合并单元格，`<tr>`表示行，`<th>`表示表头单元格。 在输入元素中，`<input type="">`的`type`属性有多种值，如`text`、`password`、`radio`、`checkbox`、`reset`、`submit`...
Html_CSS_JS_Jquery总结.doc
11-18
10. **表格标签**：`<table>`、`<tr>`、`<td>`、`<th>`、`<caption>`、`<thead>`、`<tbody>`和`<tfoot>`等，用于创建和格式化表格，`rowspan`和`colspan`用于单元格合并，`cellspacing`和`cellpadding`调整单元格...
项目中碰到的css兼容问题小结
09-25
当在表格的thead部分定义了宽度和高度，并且在td中使用`colspan`时，可能会遇到宽度失效的问题。这是因为某些浏览器可能没有正确处理表格的自动布局。为解决这个问题，可以在table元素上添加`table-layout: fixed`...
毕向东HTML_CSS_JavaScript教程笔记
11-01
在HTML中，字体标签`<font>`用于设置文字的大小和颜色，例如`文字</font>`。颜色可以用颜色单词（如`red`）或者十六进制数值（如`#FF0000`）来指定。标题标签`<h1>`至`<h6>`用于创建六级标题，`<hr>`标签创建水平线...
CSS精美表格
12-14
在HTML中，表格主要由`<table>`、`<tr>`（行）、`<th>`（表头单元格）和`<td>`（数据单元格）标签构成。一个简单的表格结构如下： ```html 表头1 表头2 <td>数据1</td> <td>数据2</td> <td>...
CSS中表格以及表单的属性以及运用
qq_65841721的博客
10-21 1512
css中表单和表格运用
HTML中td的colspan和rowspan
中年人
05-16 2万+
1、td的colspan属性表示单元格所占的列数。 2、td的rowspan属性表示单元格所占的行数。 <body> <table border="15px" align="center" width="400px" height="400px" cellpadding="15px" cellspacing="0px"> <tr> &l...
css 合并行 和并列 colspan , rowspan
a520songhai的博客
07-05 5965
&lt;table border="1" width="100" height="100"&gt; &lt;tr&gt; &lt;td colspan="2"&gt;sv&lt;/td&gt; &lt;td&gt;ddddd&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &
HTML表格跨行、跨列操作(rowspan、colspan)
热门推荐
sning999
02-28 22万+
一般使用&lt;td&gt;元素的colspan属性来实现单元格跨列操作，使用&lt;td&gt;元素的rowspan属性来实现单元格的跨行操作。colspan属性规定单元格可横跨的列数，所有浏览器都支持colspan属性。其取值为number，如下图所示：例如：&lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;星期一&lt;/th&gt;
CSS盒子模型
howeres的博客
12-09 395
盒子模型是指css指定一个块级元素与周围的关系，是一种定义，有4个。 margin(幅度，边沿)边距，border边框，padding(填充)边框与内容之间的填充，content内容； 在此基础上，设置上边距：margin-top: 15px; 设置右边距：margin-right: 40px; // 记住滚动条 window.history.scrollRestoration && (window.history.scrollRestoration='auto'); // auto 改
解决table设置了colspan之后再设置width 无效
gz-郭小敏的博客
01-24 4237
问题如标题所示， 解决办法：设置table-layout="fixed"
table 给td设置不同宽度 css
05-30
可以使用`<colgroup>`标签来设置 table 中的列的宽度，从而使所有的 td 元素都遵循这个宽度。如果需要给不同的列设置不同的宽度，可以在`<colgroup>`标签中使用多个`<col>`标签，每个`<col>`标签设置一个宽度，然后在 table 中的 td 元素中使用`colspan`属性来占用对应的列。 下面是一个例子： ```html <table> <colgroup> <col style="width: 100px;"> <col style="width: 200px;"> <col style="width: 300px;"> </colgroup> <tr> <td>第一列</td> <td colspan="2">第二列和第三列合并</td> </tr> <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> </table> ``` 在这个例子中，第一列的宽度为 100px，第二列的宽度为 200px，第三列的宽度为 300px。第二行中第一列、第二列和第三列分别占用了对应的列，所以它们的宽度分别是 100px、200px 和 300px。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值