使用内容调整表头大小

Question

我有一个表格，里面有内容。我希望能够将列的大小调整为 0 像素，使其看起来“消失”。问题是由于标题和单元格内有内容，它只会缩小到内容的大小。

我只是想让它像这样工作：如果我将标题宽度设置为 10 像素，它应该变成 10 像素宽，无论标题或列内是什么。

我通过将单元格内容包装到一个绝对定位的容器中来解决问题：

 <table>
   <tr>
      <th style="width:0px">
          <div class="cell-wrapper">Some super long content</div>
      </th>

      <th>
          <div class="cell-wrapper">More content, could be an image</div>
      </th>
   </tr>
 </table>

 .cell-wrapper
 {
     position: absolute;
 }

但这种方法存在多个问题。有没有办法在没有绝对定位/容器解决方法的情况下做到这一点？谢谢！

Answer 1

你可以试试这样的..

.cell-wrapper {
  border: 1px solid black;
  }
  
 

 <table>
   <tr>
      <th style="display: table-column;">
          <div class="cell-wrapper">Some super long content</div>
      </th>

      <th>
          <div class="cell-wrapper">Another cell with long text</div>
      </th>
   </tr>
 </table>