css - 设置列宽不起作用

Question

所以我在 div 里面有一张桌子

<div class="table-container">
  <div class="table-wrapper">
    <table class="some-table"/>
  </div>
</div>

我有

.table-container {
  width: 100%;
}

.some-table {
  column-width: 50px;

}

这似乎没有设置列的宽度。我也尝试对 td 元素做同样的事情，如果原始宽度低于 50px，唯一的效果似乎是增加列的宽度。

如何将列宽设置为我想要的？

score 2 · Accepted Answer

您应该知道column-widthandcolumn-count属性（以及大多数其他 column-* 属性）不适用于表，如多列布局模块中所述

名称：列宽

适用于： 不可替换的块级元素（表格元素除外）、表格单元格和行内块元素

score 0 · Accepted Answer

我认为是浏览器问题，请尝试以下操作：

.some-table {
    column-width:50px;
    -moz-column-width:50px; /* Firefox */
    -webkit-column-width:50px; /* Safari and Chrome */
}

2 回答 2