【问题标题】：Multi column div inside table: Containing div only has width of the first columns表格内的多列 div：包含 div 的只有第一列的宽度
【发布时间】：2017-08-25 05:25:51
【问题描述】：

我正在尝试在另一个可能包含多列的 div 周围放置一个“div”。

不过，如你所见here

<table class="datatable">
<tr>
   <td class="leftcolumn">Radiobuttons:</td>
   <td class="rightcolumn">
      <div style="border: 2px solid grey;">
         before
         <div class="morecols">
            <label><input type="radio" name="ctypeid" value="1" /> One</label><br />
            <label><input type="radio" name="ctypeid" value="2" /> Two</label><br />
            <label><input type="radio" name="ctypeid" value="3" /> Three</label><br />
            <label><input type="radio" name="ctypeid" value="4"checked="checked" /> Four</label><br />
            <label><input type="radio" name="ctypeid" value="5" /> Five</label><br />
            <label><input type="radio" name="ctypeid" value="6" /> Six</label><br />
            <label><input type="radio" name="ctypeid" value="7" /> Seven</label><br />
            <label><input type="radio" name="ctypeid" value="8" /> Eight</label><br />
            <label><input type="radio" name="ctypeid" value="9" /> Nine</label>
         </div>after
      </div>
   </td>
</tr>
</table>

仅蓝色 div 与第一列一样宽。我想包含所有三个。

我在这里错过了什么？

【问题讨论】：

像这样 "" 给表格提供 100% 的宽度，这可能会有所帮助。

检查column-rule 属性。

标签： css css-multicolumn-layout

【解决方案1】：

.morecols { <br>
   height: 65px;
   -webkit-column-count: 3; /* Chrome, Safari, Opera */
   -moz-column-count: 3; /* Firefox */
   border: 1px solid black;
   column-rule: 1px solid grey;
     background-color: #ccccff;
}

【讨论】：

感谢 Alsida，但我不想知道会有多少列，这就是我设置高度的原因...

【解决方案2】：

我改变了两件事

1。 100% 宽度到您的桌子

<table class="datatable" width="100%">

2。 '.morecols' 类的宽度减少到 100 像素；

.morecols {
   height: 65px;
   -moz-columns: 100px;
   -webkit-columns: 100px;
   columns: 100px;
   border: 1px solid black;
   column-rule: 1px solid grey;
     background-color: #ccccff;
}

现在看起来不错。

在此处查看更新的小提琴：https://jsfiddle.net/b4fucp5x/1/

【讨论】：

感谢 Kaushal 的贡献，但我希望桌子不要超出必要的范围。有没有办法？

【解决方案3】：

所以您不知道会有多少列，并且您不希望表格不超过必要的宽度。

好的，我已经对你提供的代码做了两件事

从 'morecols' div 中删除了 <br> 标签。
为所有标签添加浮动并打破第三个标签浮动以适合您的给定高度。

这是一个更新的小提琴：https://jsfiddle.net/b4fucp5x/6/

【讨论】：