table td合并后的宽度怎么设置？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table td合并后的宽度怎么设置？相关的知识，希望对你有一定的参考价值。
表格
<table class="mainTable" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="subTitle">企业信息：</td>
<td class="contentTitle">图片</td>
<td class="contentTitle">图片</td>
<td class="contentTitle">图片</td>
</tr>
</table>
设置宽度css：
.mainTable tr:nth-child(1) td:nth-child(1)
width: 120px;
第一个td里合并了两列，再设置宽度就不管用了，如何解决啊？？？
直接在td上写style就是了。
table 中 文字长度大于td宽度，导致文字换行 解决方案
表格table的td单元格中，文字长了往往会撑开单元格，但是如果table都不够宽了，就换行了好像（不要较真其他情况，我只说会换行的情况）。换行后的表格显得乱糟糟，不太好看，我不喜欢这样的换行。当然可以通过对每列td都设置宽度，那样太麻烦了，并且有时没法预计td中的文字会有多长，没法给固定宽度。
为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如 <td nowrap>文字内容</td> 这样。
但是如果给每个td都加上nowrap属性，貌似太繁琐并且占用空间和流量。于是乎，我找css的实现方法，不擅长此术，尝试了n多个样式后，找到white-space: nowrap; 貌似跟直接给td加nowrap差不多，那么就可以像下面这样定义样式，即可实现td里不换行，字符串长了就撑宽表格宽度。
<html> <head> <title>test</title> <style type="text/css"> th { width:90px; white-space: nowrap; } </style> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <th> 我是乱七八糟的字符串 </th> <th> 悟空的博客 </th> <th> www.7es.cn </th> </tr> <tr> <td> 我是乱七八糟的字 </td> <td> 我很长哦 </td> <td> 悟空的博客 </td> </tr> </table> </body> </html>
2.table 中 文字长度大于td宽度，溢出文本用“...”代替
.class1｛
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。
我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。
<html> <head> <title>test</title> <style type="text/css"> .mytable { table-layout: fixed; width: 400px; border: 0px; margin: 0px; } .class1 { text-overflow: ellipsis; /* for IE */ -moz-text-overflow: ellipsis; /* for Firefox,mozilla */ overflow: hidden; white-space: nowrap; border: 1px solid; text-align: left; } </style> </head> <body> <table class="mytable" border="1" cellpadding="0" cellspacing="0"> <tr> <th width="30%" class="class1">测试</th> <th width="70%" class="class1">测试测试测试测试测试测试测试测试测试测试测试123123</th> </tr> <tr> <td>td1</td> <td>td2</td> </tr> </table> </body> </html>
参：
2.table 中 文字长度大于td宽度，溢出文本用“...”代替
以上是关于table td合并后的宽度怎么设置？的主要内容，如果未能解决你的问题，请参考以下文章
html 如何在css 里设置table 的个个列的固定宽度
table只给td设置宽度让它自己撑开一定的宽度，然后怎么使table居中。