css - 表格内的多列 div：包含 div 的只有第一列的宽度

Question

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

但是，正如您在这里看到的

<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 仅与第一列一样宽。我想包含所有三个。

我在这里想念什么？

Answer 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;
}

Answer 2

我改变了两件事

1. 100% 宽度到您的桌子

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

2. '.morecols' 类的宽度减少到 100px；

.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/

Answer 3

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

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

1. <br>从 'morecols' div 中删除了标签。

2. 将浮动添加到所有标签并打破第三个标签浮动以使其适合您的给定高度。

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