根据其中的文本动态设置列标题的宽度

Question

我正在制作一张表格，如下面

所示

列的宽度现在是常量。 Here是我的代码的链接。 我们可以看到第二列占用的空间超出了它的需要。

我的问题是，我们可以根据内容控制列的宽度，同时保持表格标题倾斜的表格的当前设置。

    * {
      box-sixing: border-box;
    }
    
    .outerDiv {
   //   background: grey;
      height: 200px;
      width: 100px;
      border: 1px solid black;
      border-bottom: 0;
      border-left: 0;
      transform: skew(-30deg) translateX(58%);
    }
    
    th:first-child .outerDiv {
      border-left: 1px solid black;
      position: relative;
    }
    
    .innerDiv {
      position: absolute;
      width: 220px;
      height: 85px;
      bottom: -34%;
      left: 10px;
      transform: skew(30deg) rotate(-60deg);
      transform-origin: 0 0;
      text-align: left;
    }
    
    body,
    html {
      height: 100%;
    }
    
    body {
      display: flex;
      justify-content: center;
    }
    
    table {
      border-collapse: collapse;
    }
    
    td {
      border: 1px solid black;
    }

    <table cellpadding="0" cellspacing="0">
      <tr> 
              <th>
          <div class="outerDiv">
            <div class="innerDiv"></div>
          </div>
        </th>
        <th>
          <div class="outerDiv">
            <div class="innerDiv">First column header cell is very long  </div>
          </div>
        </th>
        <th>
          <div class="outerDiv">
            <div class="innerDiv">Second column</div>
          </div>
        </th>
        <th>
          <div class="outerDiv">
            <div class="innerDiv">Third column header cell is very very very very long</div>
          </div>
        </th> 
      </tr>
   <tr>
      <td class="wider">Target</td>
      <td>5</td>
      <td>26</td>
      <td>9</td>
    </tr>
    <tr>
      <td class="wider">75th Percentile</td>
      <td>5</td>
      <td>26</td>
      <td>9</td>
    </tr>
    <tr>
      <td class="wider">50th Percentile</td>
      <td>5</td>
      <td>26</td>
      <td>9</td>
    </tr>
    <tr>
      <td class="wider">25th Percentile</td>
      <td>5</td>
      <td>26</td>
      <td>9</td>
    </tr>
    </table>

Answer 1

您可以使用display: grid并使用grid-auto-columns或grid-auto-rows min-content值： https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns