复选框列表对齐到 2 或 3 列

Question

如何使用 css 或 jquery 将其更改为 2 列或 3 列，目前它在一列中

这里是小提琴的链接。 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>

Answer 1

我真的认为你需要用框架中的 3 列来构建你的 html，这比用 js 改变表更好。

如果不是……

像这样添加到您的HTML“列分隔符”类中：

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

而你的js 可以是：

$(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();

        }); 

    }

});

从这里开始 - jsfiddle

Answer 2

使用这个：

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

但它不适用于 IE

Answer 3

这里有一些东西可以帮助你开始

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) + '%'
        });
    });
});

示例

开启JSFIDDLE

它有一些已知的错误，例如没有包含标题，但您应该能够从中获得完整的解决方案。