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

Question

我正在尝试在另一个可能包含多列的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仅与第一列一样宽。我想要包含所有这三个。

我在这里缺少什么？

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. 从＆＃39; morecols＆＃39;中删除了<br>代码格。

2. 在所有标签上添加浮动并打破第3个标签浮动以使其适合您的指定高度。

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