表格行切换函数隐藏后显示列不对齐，如何正确恢复表格行？

Hey there! Let's get that column misalignment sorted out for you. The issue stems from a couple of invalid HTML practices and incorrect display property usage when toggling the row. Let's walk through what's wrong and how to fix it:

What's Causing the Misalignment? #

1. Invalid Table Structure: You wrapped a <tr> inside a <div>—tables don't allow this! Tables can only have <thead>, <tbody>, or <tfoot> as direct children, and <tr> elements must live inside those containers. That rogue div breaks the table's built-in layout logic.
2. Nested Table Cells: Your <th> elements are incorrectly holding <td>s inside them. <th> and <td> are sibling elements under a <tr>, not parent-child. This messes up the column count calculation.
3. Wrong Display Property: When you set display: block to show the row again, you're overriding the default display: table-row for table rows. Block elements don't follow table layout rules, hence the misalignment.

Fixed Solution (Using jQuery as You Wanted) #

Here's the corrected code with valid HTML and smooth jQuery toggle functionality:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <style>
        #toggleTargetRow {
            text-align:right;
        }
    </style>
    <!-- Include jQuery (you can also host this locally if preferred) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <table class="w3-table-all">
        <thead>
            <!-- Fixed: th and td are siblings, no nesting -->
            <tr class="w3-light-grey w3-hover-green" id="toggleTrigger">
                <th>First Name</th>
                <td>abc</td>
                <td>abc</td>
            </tr>
            <!-- Removed the invalid div, moved row directly into thead -->
            <tr class="w3-hover-green" id="toggleTargetRow">
                <th>Jill</th>
                <td>Smith</td>
                <td>50</td>
            </tr>
        </thead>
        <tbody>
            <tr class="w3-hover-text-green">
                <td>Bo</td>
                <td>Nilson</td>
                <td>35</td>
            </tr>
        </tbody>
    </table>

    <script>
        // jQuery toggle function
        $('#toggleTrigger').click(function() {
            // jQuery's toggle() automatically uses the correct display property (table-row)
            $('#toggleTargetRow').toggle();
            
            // If you want explicit control instead of toggle(), use this:
            // const targetRow = $('#toggleTargetRow');
            // if (targetRow.is(':hidden')) {
            //     targetRow.css('display', 'table-row');
            // } else {
            //     targetRow.hide();
            // }
        });
    </script>
</body>
</html>

Key Fixes Breakdown #

• Valid HTML: Got rid of the div wrapping the row, fixed the nested <td>s inside <th>, and organized the table into proper <thead> and <tbody> sections.
• Correct Display Handling: jQuery's .toggle() method takes care of showing the row with display: table-row (the default for table rows) instead of block, which keeps the table's column alignment intact.
• Clearer Naming: Renamed IDs to be more intuitive (toggleTrigger for the clickable header row, toggleTargetRow for the row being shown/hidden) to make the code easier to follow.

This should resolve the column misalignment completely, as we're now working with the table's native layout system instead of breaking it.

内容的提问来源于stack exchange，提问作者user9594905