All geek questions in one place

How to display vertical text in column headings without overflowing text, and also without expanding the width of other columns

I want to build a table with vertical column headers, as shown in the figure here . But the text in the column heading can be variable, so when I have more text in the column heading, the text overflows.

My question is how to increase the width of this column so that the text does not overflow.

here is a link to my code. I also inserted the code below.

<table id="example" class="dataTable display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th class="rank">Rank</th>
            <th class="wider">User Inserted Title Name</th>
            <th class="rotate"><div><div class="textH">Fisrt Number second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
            <th class="rotate"><div><div class="textH">Fisrt Number<br> Second Number</div></div></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>System Architect and Analyser</td>
            <td>1</td>
            <td>4</td>
            <td>6</td>
            <td>20</td>
            <td>5</td>
            <td>1</td>
            <td>4</td>
            <td>6</td>
            <td>20</td>
            <td>5</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Accountant</td>
            <td>4</td>
            <td>13</td>
            <td>7</td>
            <td>11</td>
            <td>8</td>
            <td>1</td>
            <td>4</td>
            <td>6</td>
            <td>20</td>
            <td>5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Junior Technical Author</td>
            <td>5</td>
            <td>26</td>
            <td>9</td>
            <td>3</td>
            <td>19</td>
            <td>1</td>
            <td>4</td>
            <td>6</td>
            <td>20</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

CSS

.dataTable th 
{
 word-wrap: break-word;
}
td, th 
{
border: 1px solid #000;
}
th.rank 
{
width: 20px !important;
}
th.wider 
{
/*width: 120px !important;*/
}
th.rotate 
{
height: 150px;
padding: 0px;
/*width: 20px !important;*/
font-weight: normal;
vertical-align:bottom;  
}
th.rotate > div 
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
width: 50px;
}

.textH
{
// overflow:visible:
height: 150px !important;
width: 150px !important;
text-align:left;   
}
+4
source share
2 answers

Well, here is what I would do: Codepen

JavaScript. , width height JS script. , , .

+1

writing-mode: vertical-rl; transform: rotate(-180deg);,

.dataTable th {
  word-wrap: break-word;
}
td,th {
  border: 1px solid #000;
}
th.wider {
  /*width: 120px !important;*/
}
th.rotate {
  height: 150px;
  padding: 0px;
  font-weight: normal;
}
th.rotate > div {
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
}
.textH {
  height: 150px;
  text-align: center;
}
<table id="example" class="dataTable display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="rank">Rank</th>
      <th class="wider">User Inserted Title Name</th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
      <th class="rotate">
        <div>
          <div class="textH">Fisrt Number
            <br> Second Number</div>
        </div>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>System Architect and Analyser</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Accountant</td>
      <td>4</td>
      <td>13</td>
      <td>7</td>
      <td>11</td>
      <td>8</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Junior Technical Author</td>
      <td>5</td>
      <td>26</td>
      <td>9</td>
      <td>3</td>
      <td>19</td>
      <td>1</td>
      <td>4</td>
      <td>6</td>
      <td>20</td>
      <td>5</td>
    </tr>
  </tbody>
</table>
+1

Source: https://habr.com/ru/post/1671492/

More articles:


All Articles