Multi column div inside table: Containing div only has width of the first columns

Question

I'm trying to put a "div" around another div that may contain multiple columns.

However, as you can see 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>

the blue-colored div only is as wide as the first column. I'd like to contain all three of them.

What am I missing here?

Check the [column-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule) property. — skobaljic, Apr 25 '16 at 17:56

score 1 · Answer 1 · edited Apr 25 '16 at 18:52

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

edited Apr 25 '16 at 18:52

Christian Giupponi

7,408
11
68
113

answered Apr 25 '16 at 18:12

Alsida Dizdari

11
2

Thanks Alsida but I'd like rather not to know how many columns there will be, that's why I set the height... – Andreas - Dellekom Apr 25 '16 at 18:26

score 0 · Answer 2 · answered Apr 25 '16 at 17:56

0

I've changed two things

1. 100% width to your table

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

2. Reduced width of '.morecols' class to 100px;

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

Now it looks good.

Check updated fiddle here : https://jsfiddle.net/b4fucp5x/1/

answered Apr 25 '16 at 17:56

Kaushal Suthar

410
5
24

Thank you for your contribution Kaushal but I would prefer the table to not be wider than necessary.. is there a way? – Andreas - Dellekom Apr 25 '16 at 18:27

score 0 · Answer 3 · answered Apr 25 '16 at 18:52

So you don't know how many columns there will be and you don't want table to not be wider than necessary.

Okay to do so again I've done two things to your provided code

Removed <br> tag from the 'morecols' div.
Added float to the all labels and breaking the 3rd label float to fit it into your given height.

Here is a updated fiddle : https://jsfiddle.net/b4fucp5x/6/

Multi column div inside table: Containing div only has width of the first columns

3 Answers3

1. 100% width to your table

2. Reduced width of '.morecols' class to 100px;