मेरे पास निश्चित-चौड़ाई वाली एक टेबल है और मैं टेबल के लेआउट को प्रभावित किए बिना टेक्स्ट को एक <td> के अंदर घुमाने की कोशिश कर रहा हूं। लेकिन समस्या यह है कि यदि टेक्स्ट बड़ा है, तो यह टेक्स्ट को लपेटता है। मैंने nowrap सेट करने का प्रयास किया लेकिन यह % के साथ काम नहीं कर रहा है, हालांकि, यह px के साथ काम कर रहा है।

table {
  border:1px solid black;
  border-collapse:collapse;
}

table td {
  border:1px solid black;
  border-collapse:collapse;
}

.vertical-align{
 transform:rotate(-90deg); 
 white-space: nowrap;
}
<table>
<tr>
  <td style="width:5%;" rowspan="2" class="vertical-align" >
    Dummy Heading   Dummy Heading
  </td>
    <td style="width:95%;">
    Dummy Text Dummy Text
  </td>
</tr>
<tr>

    <td style="width:95%;">
    Dummy Text Dummy Text
  </td>
</tr>
</table>

यह रहा JSFiddle

मैं टीडी का आकार नहीं बढ़ाना चाहता, इससे कोई फर्क नहीं पड़ता कि टेक्स्ट कितना बड़ा है। इस समस्या का समाधान किस प्रकार से किया जा सकता है?

0
Hussain M. Rauf 26 पद 2018, 12:31

1 उत्तर

सबसे बढ़िया उत्तर

इसे बदलें:

<td class="vertical-align">text</td>

इस कदर:

<td><span class="vertical-align">text</span></td>

मैंने td में span जोड़ा क्योंकि मैं टेक्स्ट के लिए writing-mode: vertical-rl शैली जोड़ना चाहता हूं और td तत्व इसका ठीक से समर्थन नहीं करता है। नीचे एक उदाहरण:

table {
  border-collapse:collapse
}

table td {
  border:1px solid black
}

.vertical-align {
  white-space:nowrap;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 10%; /* optional */
  transform: rotate(180deg) /* you want */
}
<table width="100%">
  <tr>
    <td width="5%" rowspan="2"><span class="vertical-align">Dummy Heading Dummy Heading</span></td>
    <td width="95%">Dummy Text Dummy Text</td>
  </tr>
  <tr>
    <td width="95%">Dummy Text Dummy Text</td>
  </tr>
</table>
2
Mordecai 26 पद 2018, 14:51