Question

这是我的JsFiddle

点击箭头向下图像，我显示下一个tr（最初隐藏），其中有一个带有colspan 5的td和里面的表。

我的问题是为什么td没有扩展到整行，因为我指定了colspan = 5

$(function () {
    $('.glyphicon-chevron-down').click(function () {
        $(this).closest("tr").next().removeClass('hidden').addClass('show');
    });
});

Answer 1

因为您的.show bootstrap css规则包含以下

.show{
    display:block; !important;
}

您可以使用自定义CSS规则覆盖它，如下所示：

.show{
    display:table-row !important;
}

Demo

Answer 2

班级表演造成了麻烦。删除该类可以解决问题。

HTML

<table class="table">
    <caption>Order History</caption>
        <thead>
            <tr>
                <th>S.No</th>
                <th>Transaction ID</th>
                <th>Date & Time</th>
                <th>Status</th>
                <th>View/Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.</td>
                <td>T00580901</td>
                <td>10 May'14<br />10:10 am</td>
                <td>Delivered</td>
                <td>
                    <span class="glyphicon glyphicon-chevron-down"></span>
                    <span class="glyphicon glyphicon-repeat"></span>
                </td>
            </tr>
            <tr style="display:none">
                <td colspan="5">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Dish Name</th>
                                <th>Price</th>
                                <th>Quantity</th>
                                <th>Total Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1.</td>
                                <td>South Indian Meal</td>
                                <td>Rs. 100</td>
                                <td>2</td>
                                <td>Rs. 200</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
    </tbody>
</table>

Jquery的

$(function () {
    $('.glyphicon-chevron-down').click(function () {
        console.log("hi");
        $(this).closest("tr").next().toggle();
    });
});

查看更新小提琴。 http://jsfiddle.net/2Xzfb/2/

Answer 3

将table-layout设置为fixed：

.table{
    table-layout: fixed;
    width: 400px;
}

demo

Answer 4

我不确定发生了什么，我没有那么多地研究它，但这似乎有效：http://jsfiddle.net/57d3M/1/。

$(function () {
    $('.glyphicon-chevron-down').click(function () {
        $(this).closest('tr')
        .next('tr')
        .toggleClass('hidden');
    });
});

动态添加td不会通过colspan扩展

4 个答案:

Demo