如何使用css在表格中創建垂直列

enter image description here

我無法找到一個方法來做到這一點。任何人都可以幫助我嗎？

2012-12-03 vaibhav shah

用rowpan屬性合併單元格。垂直文本：http://stackoverflow.com/questions/3225572/vertical-text-in-ie-within-a-table-cell – nhahtdh

閱讀表「行跨度」和「列跨度」，它可能會幫助你。 – Shahzeb

我不認爲你可以有一個全面的跨瀏覽器解決方案，反正試試這個：

.verticalText { 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
}

<table border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="4"> 
 
     <div class="verticalText">one</div> 
 
     </td> 
 
     <td>One</td> 
 
     <td>Other</td> 
 
    </tr> 
 
    <tr> 
 
     <td>One</td> 
 
     <td>Other</td> 
 
    </tr> 
 
    <tr> 
 
     <td>One</td> 
 
     <td>Other</td> 
 
    </tr> 
 
    <tr> 
 
     <td>One</td> 
 
     <td>Other</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

在HTML的部分，你可以使用屬性「行跨度」，告訴單元格（td）跨越n行;您必須在後續的「spanned」單元格中刪除相對單元格聲明。與屬性「colspan」同樣水平工作。這些屬性的默認值是1，並且是隱含的。

CSS部分嘗試在圖像中看到垂直文本，但它不是CSS標準，因此您必須在各種瀏覽器中嘗試。如果無法實現完全兼容，那麼如果文本不是動態的，則可能會被迫按圖像渲染該文本。

已編輯的HTML將包含容器的文本包含在註釋中。

來源

2012-12-03 09:48:48 LittleSweetSeas

verticalText中的文本應該被包裹在一個範圍內，併爲裏面的span定義CSS（使用'display：block'）。否則，使用當前代碼，可能會出現奇怪的效果，因爲整個單元格被旋轉（不僅僅是文本）。 – nhahtdh

我已經嘗試過這個，但是垂直列從來不適合其他列的大小 –

你是什麼意思的大小？第一個td的高度應該很好，也許你必須調整文本對齊和垂直對齊屬性 – LittleSweetSeas

使用rowspan檢查DEMO HERE

您需要更改rowspan號碼，當你添加新行。

來源

2012-12-03 10:37:46 Sowmya

謝謝Sowmya展示演示 –

如何使用css在表格中創建垂直列

回答

相關問題