鼠标悬停在桌子头上，如何解决这个问题？

Question

我在表行上有一个鼠标悬停和mouseout，以在悬停时显示链接。出于某种原因，当我将鼠标悬停在行上时，它会缩小我的thead并使链接异常发狂。我无法弄清楚我的一生。我怎样才能解决这个问题？ 这是我的html部分：

<table class="table" id="sessions">
        <thead>
            <tr>
                <th scope="col">Sessions</th>
                <th scope="col" id="trigger">Next Trigger</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of tableTwo" (mouseover)="showLinks=true" (mouseout)="showLinks=false">
                <td scope="row">{{row.session}}</td>
                <td *ngIf="showLinks" scope="row">
                    <a href="">View</a> 
                    <a href="">Edit</a>
                    <a href="">Trigger Now</a>
                </td>
                <td scope="row" id="trigger">{{row.nextTrigger}} </td>    
            </tr>

        </tbody>
    </table>

Answer 1

thead中只有2个标题列，但生成行时实际上有3列。 头再增加一列以保持平衡。

<th scope="col">Sessions</th>
<th *ngIf="showLinks"></th>       
<th scope="col" id="trigger">Next Trigger</th>