[英]Different width of column in the HTML table
I am trying to make the width of tds different in the HTML tale but I am unable to do so. 我正在尝试使tds的宽度在HTML故事中有所不同,但我无法这样做。
HTML Code HTML代码
<table class="TFtable" border="1">
<tr>
<th >Heading1</th>
<th >Heading2</th>
<th >Heading3</th>
</tr>
<tr>
<td>Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
<td >Text</td>
<td >Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
CSS 的CSS
.TFtable {
width: 50%;
border-collapse: collapse;
table-layout: fixed;
}
.TFtable tr {
padding: 7px;
border: #4e95f4 1px solid;
}
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr {
background: #FFFFFF;
}
/* Define the background color for all the ODD background rows */
.TFtable tr:nth-child(odd) {
background: #FFFFFF;
}
/* Define the background color for all the EVEN background rows */
.TFtable tr:nth-child(even) {
background: #BCCECE;
}
.TFtable td{
table-layout: fixed;
width: 20px;
height:auto;
overflow: auto;
}
Link to JSFiddle. 链接到JSFiddle。
You can use this HTML Code to make different td`s width without using CSS 您可以使用此HTML代码来制作不同的td`s宽度,而无需使用CSS
<table border="1" width="100%;">
<tr>
<th >Heading1</th>
<th >Heading2</th>
<th >Heading3</th>
</tr>
<tr>
<td width="20%">Text jshdf hjkhsdk jhfkhds fkjhf sdjkh dsfkjh</td>
<td width="30%">Text</td>
<td width="50%">Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.