Question

我正在尝试创建一个具有垂直旋转标题列的HTML表格，就像您在Excel中看到的那样。我已经使用了一些代码片段来使文本循环正常工作，但是我在使用自动换行时遇到了问题。

我遇到的问题是，基于单元格的水平宽度（40px）进行自动换行，而我真正想要的是根据单元格的垂直高度（120px）进行自动换行。我知道这种情况正在发生，因为自动换行首先发生，文本轮换发生在第二位。

是否可以根据表格单元格中文本的旋转大小指定自动换行距离（字符或像素）？

在下面的例子中，我希望“Bear Creek”在一条线上，“Cascadilla Flat River Access”在两条线上。我不介意将垂直距离调整到合适的大小，但希望所有列都有固定的宽度。

:root{
  --firstrow-rotation: -90.0deg;}
  --firstrow-msrotate: 1; 
}

  
  table.tableizer-table {
		font-size: 12px;
		border: 2px solid #CCC; 
		font-family: Arial, Helvetica, sans-serif;
    table-layout:fixed;
	} 
	.tableizer-table td {
		padding: 4px;
		margin: 3px;
		border: 1px solid #CCC;
    text-align: center;
	}
	.tableizer-firstrow th {
		background-color: #86a755; 
		color: #FFF;
    height: 120px;
	}
  
.rotate {
	filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=var(--firstrow-rotation))"; /* IE8 */
	   -moz-transform: rotate(var(--firstrow-rotation));  /* FF3.5+ */
	    -ms-transform: rotate(var(--firstrow-rotation));  /* IE9+ */
	     -o-transform: rotate(var(--firstrow-rotation));  /* Opera 10.5 */
  -webkit-transform: rotate(var(--firstrow-rotation));  /* Safari 3.1+, Chrome */
	        transform: rotate(var(--firstrow-rotation));  /* Standard */
  width: 40px;
}

<table class="tableizer-table">
<thead><tr class="tableizer-firstrow"><th><div class="rotate"></div></th><th><div class="rotate">Bear Creek</div></th><th><div class="rotate">Essex Creek</div></th><th><div class="rotate">Paola River Access</div></th><th><div class="rotate">Cascadilla Flat River Access</div></th><th><div class="rotate">Moccasin Creek</div></th><th><div class="rotate">West Glacier River Access</div></th><th><div class="rotate">Blankenship Bridge</div></th><th><div class="rotate">House of Mystery</div></th><th><div class="rotate">Teakettle FAS</div></th></tr></thead><tbody>
 <tr><td>Bear Creek</td><td>-</td><td>4.5</td><td>11.5</td><td>23.0</td><td>30.0</td><td>38.5</td><td>44.0</td><td>55.0</td><td>69.5</td></tr>
 <tr><td>Essex Creek</td><td>4.5</td><td>-</td><td>7.0</td><td>18.5</td><td>25.5</td><td>34.0</td><td>39.5</td><td>50.5</td><td>65.0</td></tr>
 <tr><td>Paola River Access</td><td>11.5</td><td>7.0</td><td>-</td><td>11.5</td><td>18.5</td><td>27.0</td><td>32.5</td><td>43.5</td><td>58.0</td></tr>
 <tr><td>Cascadilla Flat River Access</td><td>23.0</td><td>18.5</td><td>11.5</td><td>-</td><td>7.0</td><td>15.5</td><td>21.0</td><td>32.0</td><td>46.5</td></tr>
 <tr><td>Moccasin Creek</td><td>30.0</td><td>25.5</td><td>18.5</td><td>7.0</td><td>-</td><td>8.5</td><td>14.0</td><td>25.0</td><td>39.5</td></tr>
 <tr><td>West Glacier River Access</td><td>38.5</td><td>34.0</td><td>27.0</td><td>15.5</td><td>8.5</td><td>-</td><td>5.5</td><td>16.5</td><td>31.0</td></tr>
 <tr><td>Blankenship Bridge</td><td>44.0</td><td>39.5</td><td>32.5</td><td>21.0</td><td>14.0</td><td>5.5</td><td>-</td><td>11.0</td><td>25.5</td></tr>
 <tr><td>House of Mystery</td><td>55.0</td><td>50.5</td><td>43.5</td><td>32.0</td><td>25.0</td><td>16.5</td><td>11.0</td><td>-</td><td>14.5</td></tr>
 <tr><td>Teakettle FAS</td><td>69.5</td><td>65.0</td><td>58.0</td><td>46.5</td><td>39.5</td><td>31.0</td><td>25.5</td><td>14.5</td><td>-</td></tr>
</tbody></table>

如何根据单元格高度而不是宽度来自动换行旋转文本？

0 个答案: