鼠标悬停展开表格单元格的实现方案问询

Hey there! Let's fix that table action column issue and get the hover-expand behavior working smoothly—including fixing the border glitch you mentioned. Here's a complete implementation that does exactly what you want:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { margin: 0; padding: 20px; }
        .table { display: table; width: 100%; border-collapse: collapse; }
        .tHead, .tRow { display: table-row; }
        .tHead .tCell { font-weight: bold; background: #f5f5f5; }
        .tCell { 
            display: table-cell; 
            padding: 10px; 
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            white-space: nowrap;
        }
        .tCell:last-child { border-right: none; }
        /* 关键：操作列的核心样式 */
        .tCell.actions {
            width: 40px; /* 默认仅显示单个图标的宽度 */
            overflow: hidden;
            transition: width 0.2s ease;
            text-align: center;
        }
        .tCell.actions:hover {
            width: 160px; /* 展开后容纳所有图标的宽度 */
            text-align: left;
        }
        .action-icon {
            display: inline-block;
            margin: 0 8px;
            width: 20px;
            height: 20px;
            /* 替换为你的实际图标：可以是Font Awesome、SVG或背景图 */
            background: #666;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="tHead">
            <div class="tCell">Name</div>
            <div class="tCell">Email</div>
            <div class="tCell actions">Actions</div>
        </div>
        <div class="tRow">
            <div class="tCell">John Doe</div>
            <div class="tCell">john@example.com</div>
            <div class="tCell actions">
                <span class="action-icon"></span> <!-- 默认显示的主图标 -->
                <span class="action-icon"></span> <!-- Edit -->
                <span class="action-icon"></span> <!-- Delete -->
                <span class="action-icon"></span> <!-- Other -->
            </div>
        </div>
        <div class="tRow">
            <div class="tCell">Jane Smith</div>
            <div class="tCell">jane@example.com</div>
            <div class="tCell actions">
                <span class="action-icon"></span>
                <span class="action-icon"></span>
                <span class="action-icon"></span>
                <span class="action-icon"></span>
            </div>
        </div>
    </div>
</body>
</html>

Key fixes & explanations: #

• Controlled column width: The .tCell.actions uses a narrow default width to only show one icon, with overflow: hidden hiding the rest. On hover, we widen it to fit all your action icons.
• Border glitch fixed: Instead of a single border on the entire table, we apply border-bottom to every row and border-right to every cell (except the last one). This keeps borders continuous even when the action cell expands.
• Smooth animation: Added transition: width 0.2s ease to make the expand/collapse feel natural instead of jerky.
• No layout shifts: Since we only adjust the action cell's width (and use white-space: nowrap), the rest of the table's columns won't resize or shift—exactly what you needed.
• Icon spacing: The .action-icon class adds margin between icons to prevent crowding; just swap the placeholder background with your actual icons (Font Awesome, SVG, etc.).

Adjust the default/hover widths to match your icon sizes, and you're ready to go!

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