Javascript 动态添加td不会按colspan展开

这是我的

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

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

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

---

将“表格布局”设置为“固定”：

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

---

因为您的

.show

引导css规则包含以下内容

.show{
    display:block; !important;
}

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

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

---

课堂表演引起了麻烦。移除类解决了这个问题

HTML

请参阅更新提琴。

---

我不确定发生了什么，我没有仔细研究过，但这似乎有效：

---

@user2847429您可以覆盖引导类

。如我在回答中提到的那样，使用CSS显示
@C-link OP正在使用引导，请再次检查！绝对不是我的解决方案。我希望表格是我的容器宽度。尝试分配宽度：100%不适用于meCan您是否更改show类？它是一个引导类，用于显示元素，以便设置display:block
<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>

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

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