设置列宽不起作用

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则增加列的宽度。

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

Answer 1

您应该知道column-width和column-count属性（以及大多数其他列*属性）不适用于表格，如Multi-column Layout Module

中所述

  

名称：列宽

     

适用于：未替换的块级元素（除了表元素），表格单元格和内联块元素

Answer 2

我认为这是浏览器问题，请试试这个：

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