Solution to the invalid cell width setting after setting table-layout:fixed in css table

黄舟
Release: 2017-06-30 13:38:04
Original
5408 people have browsed it

After setting the table-layer:fixed style on the settingtable, it was found that one row in the table has been merged, otherthe column widths of the unmerged rows will be averaged, and the column widths will be averaged. Wide settings will fail. There are detailed solutions below. You can learn from them. After setting the table-layer:fixed style on the setting table, I found that one row in the table had been merged, and the column widths of other unmerged rows would be averaged, and the column width settings would be invalid. If the merged rows of the table are removed, it can be displayed normally.

Reason: table-layout: For a fixed table, the width of each column is determined by the first row, and the width specified later will be ignored. You merged the first row, so the column widths are evenly divided.

Solution one:

Add

before tbody. The code is as follows:

<col style="width: 60%" /> 
<col style="width: 20%" /> 
<col style="width: 20%" />
Copy after login

Solution two:
Set a hidden one line to specify the width:

The code is as follows:

<table style="table-layout:fixed;width:200px" border="1" cellspacing="1" cell
padding
="1"> 
<tr style="
display
:none"> 
<td style="width:100px"></td> 
<td style="width:80px"></td> 
<td style="width:20px"></td> 
</tr> 
<tr> 
<td>1</td> 
<td colspan="2">2</td> 
</tr> 
<tr> 
<td>1.1</td> 
<td>2.1</td> 
<td>2.2</td> 
</tr> 
</table>
Copy after login

This method can be displayed correctly in IE6, IE7, and IE8, but it has no effect in non-IE. Another method is given below:

The code is as follows:

<style> 
td{border:1px solid red;} 
</style> 
<table style="table-layout:fixed;width:200px" border="0" cellspacing="1" cellpadding="1"> 
<tr style="
height
:0;"> 
<th style="width:100px"></th> 
<th style="width:80px"></th> 
<th style="width:20px"></th> 
</tr> 
<tr> 
<td>1</td> 
<td colspan="2">2</td> 
</tr> 
<tr> 
<td>1.1</td> 
<td>2.1</td> 
<td>2.2</td> 
</tr> 
</table>
Copy after login


The above is the detailed content of Solution to the invalid cell width setting after setting table-layout:fixed in css table. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!