我们正在使用最新版本的飞碟 v 9.1.20,因为当有大量列(例如:80 列)时,表格列会折叠。
我们还为单元格添加了word-wrap: break-word以在需要时分词,并且还使用了table-layout: fixed用于表格。
它在列数较少时起作用,但当列数增加时,该属性不会被应用并且列被折叠。
附上屏幕截图和示例代码。有没有人遇到过这个问题,请告诉我们解决方案。
HTML 代码
<html>
<head>
<style type="text/css" media="all">
.table-column {
font-size: 10px;
color: white;
background-color: black;
word-wrap: break-word;
}
</style>
</head>
<body>
<table style="table-layout: fixed;word-wrap: break-word;width: 100%;">
<tr>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column1
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column2
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column3
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column4
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column5
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column6
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column7
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column8
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column9
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column10
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column11
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column12
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column13
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column14
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column15
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column16
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column17
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column18
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column19
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column20
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column21
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column22
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column23
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column24
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column25
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column26
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column27
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column28
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column29
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column30
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column31
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column32
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column33
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column34
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column35
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column36
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column37
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column38
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column39
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column40
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column41
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column42
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column43
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column44
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column45
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column46
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column47
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column48
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column49
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column50
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column51
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column52
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column53
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column54
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column55
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column56
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column57
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column58
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column59
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column60
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column61
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column62
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column63
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column64
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column65
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column66
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column67
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column68
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column69
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column70
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column71
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column72
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column73
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column74
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column75
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column76
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column78
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column79
</td>
<td class="table-column" style="width: 15%;word-wrap: break-word;">
Column80
</td>
</tr>
</table>
</body>
</html>