class="input-group" 占用 100% 宽度答案

【问题标题】：class="input-group" is taking up 100% widthclass="input-group" 占用 100% 宽度
【发布时间】：2014-02-03 00:57:56
【问题描述】：

当用户点击thead 中的一个单元格时，我会使用一个输入元素和一个过滤器图标来填充它。问题是它使列的宽度跳跃：

Here's the fiddle:

<table class="table">
    <thead>
        <tr>
            <th>One</th>
            <th>Two</th>
        </tr>
        <tr>
            <th class='clickhere'>Click here
            </th>
            <th class='clickhere'>or here</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>21</td>
        </tr>
        <tr>
            <td>12</td>
            <td>22</td>
        </tr>
    </tbody>
<table>

    $(document).on('blur','.clickhere input',filterBlurred);
    function filterBlurred() {
        if ($(this).val() === '') {
            $(this).closest('tr').find('th').html('&nbsp;');
        }
    }
    $(document).on('click','.clickhere',filter);
    function filter() {
        $(this).html('<div class="input-group"><input class="form-control"><span class="btn input-group-addon glyphicon glyphicon-filter"> </span></div>');
        $(this).find('input').focus();
    }

【问题讨论】：

我可以通过说：$(this).closest('table').find('thead th:eq(4)').width()
我也可以设置最大宽度：嗯...
因为你有两列，你可以添加 th {width: 50%;} jsfiddle.net/Lag9x/2

标签： css twitter-bootstrap-3 tablecolumn

【解决方案1】：

(function() {
    var Variables = {};
    Variables.theadID = 0;

    // For every thead
    $('thead').not('.no-filter').each(function(index, thead) {
        var local = {};

        if ($(thead).attr('id')) {
            local.id = $(thead).attr('id');
        } else {
            // We'll assign a unique id
            Variables.theadID += 1;
            local.id = 'fw0Thead' + Variables.theadID;
            $(thead).attr('id',local.id);
        }
        // Set the max-width for each column via css.
        local.str = '';
        $('th',this).each(function(index, element) { // for every th inside of this thead
            if (!$(this).hasClass('no-filter')) {
                local.str += '#' + local.id;
                local.str += ' tr.fw0Filter th:nth-child(' + (index+1) + ') {';
                local.str += '  max-width:' + $(this).width() + 'px;';
                local.str += '}';
            }
        });
        local.css = document.createElement("style");
        local.css.type = "text/css";
        local.css.innerHTML = local.str;
        document.body.appendChild(local.css);
});
})();

【讨论】：