Question

我想构建一个包含垂直列标题的表格，如图here所示。但是列标题中的文本可以是变量的，所以当我在列标题中有更多文本时，文本会溢出。

我的问题是如何增加特定列的宽度，以便文本不会溢出。

here是我的代码的链接。我还粘贴了下面的代码。

<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;   
}

Answer 1

嗯，这就是我要做的事：Codepen

需要几行JavaScript。我们的想法是通过JS脚本计算width和height。如果你想要它完全响应，它应该被修改。

Answer 2

如果您合并writing-mode: vertical-rl;和transform: rotate(-180deg);，则无需设置宽度

即可

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如何在没有文本溢出的列标题中显示垂直文本，也不扩展其他列的宽度

2 个答案: