checkbox list alignment in to 2 or 3 columns

Question

How it possible to change this in to a 2 columns or 3 columns with css or jquery, currently its in one column

here is a link to the fiddle. http://jsfiddle.net/4510f0yx/1/

<table class="items table table-striped table-bordered table-condensed">
    <thead>
        <tr>
            <th id="operations_c0" class="checkbox-column">
                <input type="checkbox" id="operations_c0_all" name="operations_c0_all" value="1" class="select-on-check-all">
            </th>
            <th id="operations_c1">Permissions</th>
        </tr>
    </thead>
    <tbody>
        <tr class="">
            <td colspan="2" class="extrarow"><strong>Auth :: Permission</strong>
            </td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_0" value="oAuthOperationCreate" class="select-on-check">
            </td>
            <td>Create</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_1" value="oAuthOperationRead" class="select-on-check">
            </td>
            <td>Read</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_2" value="oAuthOperationUpdate" class="select-on-check">
            </td>
            <td>Update</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_3" value="oAuthOperationDelete" class="select-on-check">
            </td>
            <td>Delete</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_4" value="oAuthOperationList" class="select-on-check">
            </td>
            <td>List</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_5" value="oAuthOperationManage" class="select-on-check">
            </td>
            <td>Manage</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_6" value="oAuthOperationSearch" class="select-on-check">
            </td>
            <td>Search</td>
        </tr>
        <tr class="">
            <td colspan="2" class="extrarow"><strong>Auth :: Parent</strong>
            </td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_7" value="oAuthParentCreate" class="select-on-check">
            </td>
            <td>Create</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_8" value="oAuthParentRead" class="select-on-check">
            </td>
            <td>Read</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_9" value="oAuthParentUpdate" class="select-on-check">
            </td>
            <td>Update</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_10" value="oAuthParentDelete" class="select-on-check">
            </td>
            <td>Delete</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_11" value="oAuthParentList" class="select-on-check">
            </td>
            <td>List</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_12" value="oAuthParentManage" class="select-on-check">
            </td>
            <td>Manage</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_13" value="oAuthParentSearch" class="select-on-check">
            </td>
            <td>Search</td>
        </tr>
        <tr class="">
            <td colspan="2" class="extrarow"><strong>Auth :: Role</strong>
            </td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_14" value="oAuthRoleCreate" class="select-on-check">
            </td>
            <td>Create</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_15" value="oAuthRoleRead" class="select-on-check">
            </td>
            <td>Read</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_16" value="oAuthRoleUpdate" class="select-on-check">
            </td>
            <td>Update</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_17" value="oAuthRoleDelete" class="select-on-check">
            </td>
            <td>Delete</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_18" value="oAuthRoleList" class="select-on-check">
            </td>
            <td>List</td>
        </tr>
        <tr class="even">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_19" value="oAuthRoleManage" class="select-on-check">
            </td>
            <td>Manage</td>
        </tr>
        <tr class="odd">
            <td class="checkbox-column">
                <input type="checkbox" name="AuthItem[seltedOperations][]" id="operations_c0_20" value="oAuthRoleSearch" class="select-on-check">
            </td>
            <td>Search</td>
        </tr>
    </tbody>
</table>

yeah its based on a framework so better if we have a css sollution, if not in the worst case its ok — dev1234, Oct 14 '14 at 06:37
You can't change alignment of `` `` using css. You have to change your HTML snippet — Manwal, Oct 14 '14 at 06:42
Yes sure its possible using Jquery. something like this http://stackoverflow.com/a/6298066/2236219 — Manwal, Oct 14 '14 at 06:49

score 1 · Answer 1 · answered Oct 14 '14 at 07:05

1

use this:

table.items {column-count: 2;-moz-column-count: 2;-webkit-column-count: 3;
width: 300px;height: 272px;display: table-cell;}

but it wont work for IE

answered Oct 14 '14 at 07:05

charan kumar

2,119
2
20
26

Nope, this isnt working as expected. everything has come to one column. check this image http://www.bild.me/bild.php?file=9522981Capture.PNG – dev1234 Oct 14 '14 at 07:23

Magnus Engdal · Answer 2 · 2014-10-14T07:14:03.907

1

Here's something to get you started

CSS

table, thead, tbody, tr, th, td {
    display: block;
    text-align: left;
}
table, thead, tbody {
    width: 100%;
}
tr {
        position: absolute;
}
tr:after {
    content:' ';
    display: block;
    clear: both;
}
td, th {
    float: left;
}

jQuery

$(function () {
    var left = -1;
    var top = 0;
    $('tr').each(function () {
        var extrarow = $('td', this).hasClass('extrarow');
        top += $('td',this).first().height();
        if(extrarow) {
            left += 1;
            top = 0;
        }
        $(this).css({
            width: '33.33%',
            top: top,
            'left': (left * 33.33) + '%'
        });
    });
});

Example

On JSFIDDLE

It has some known bugs, like the header not being included, but you should be able to work from this for a complete solution.

edited Oct 14 '14 at 07:14

answered Oct 14 '14 at 07:07

Magnus Engdal

5,446
3
31
50

This is aligning to one side as in all comes in one row and many columns which is making to scroll horizontally longer. – dev1234 Oct 14 '14 at 07:16
here is a pic of how its displayed. http://www.bild.me/bild.php?file=7586680Capture1.PNG – dev1234 Oct 14 '14 at 07:26
Adding `position: relative` to `table` should make it a bit better, but pushing down the content below could be tricky with positioned elements. Another solution would be to put the rows into 2 or 3 left-floated containers with a clear-fix at the end. – Magnus Engdal Oct 14 '14 at 08:00
Please could you update the answer to make it insert a new row when there is 3 columns. and next column 4,5,6 then another row 7,8,9. so this will be done. – dev1234 Oct 14 '14 at 08:06

alquist42 · Accepted Answer · 2014-10-14T13:25:41.590

I realy think that you need to structure your html with 3 columns from the framework, it's better then alter table with js.

But if not...

Add to your HTML "colomn separator" class like this:

<tr class="extra">
   <td colspan="2" class="extrarow"><strong>Auth :: Permission</strong> </td>
</tr>

And your js can be like:

$(function () {

    var columns = [];
    $('tr.extra').each(function (i) {

        var curr_col = $(this);   
        var next_col = $('tr.extra').eq(i+1); 

        var column = curr_col.nextUntil(next_col);

        columns[i] = column;        

    });

    columns.reverse();
    var len = columns.length;

    for (i = len-2; i >= 0; i--) {

        columns[i].each( function (index, value){

            var tds = $(this).children('td');
            columns[len-1].eq(index).append(tds);
            $(this).remove();

        }); 

    }

});

Start here - jsfiddle

checkbox list alignment in to 2 or 3 columns

3 Answers3