如何让Tailwind CSS表格的hover:bg-orange-100效果应用到所有行？

当前表格仅第一行可通过hover:bg-orange-100实现悬停背景变色，问题根源是<tr>标签被放在@foreach循环外部，导致循环仅生成<td>元素，所有数据都挤在同一个<tr>里，自然只有这一行能触发悬停效果。

原代码 #

<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
    <table class="w-full text-md  bg-white shadow-md rounded">
        <thead>
        <tr class="border-b">
            <th class="text-left p-3 px-5">Name</th>
            <th class="text-left p-3 px-5">Email</th>
            <th class="text-left p-3 px-5">Team</th>

            <th class="text-left p-3 px-5">Role</th>
            <th></th>
        </tr>
        </thead>
        <tbody >
        <tr class="border-b hover:bg-orange-100 bg-gray-100">
            @foreach($data as $row)

                {{--run function once per user id--}}

                <td class="p-3 px-5"><input type="text"  value="{{$row->vendor_name}}" class="bg-transparent" readonly></td>
                <td class="p-3 px-5" ><input type="text"  value="{{$row->vendor_contact}}" class="bg-transparent" readonly></td>
                <td class="p-3 px-5" ><input type="text"  value="{{$row->vendor_email}}" class="bg-transparent" readonly></td>
                <td class="p-3 px-5" ><input type="text"  value="{{$row->vendor_role}}" class="bg-transparent" readonly></td>


                <td class="p-3 px-5 flex justify-end">
                    <button type="button" wire:click="edit({{ $row->id }})" class="mr-3 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Edit</button>
                    <button type="button" wire:click="delete({{ $row->id }})" class="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Delete</button>
                </td>

        </tr>
        @endforeach
        </tbody>
    </table>
</div>

原效果演示 #

修改方案 #

将<tr>标签移到@foreach循环内部，确保每遍历一条数据就生成一个独立的表格行，这样每个行都能应用hover:bg-orange-100样式。

修改后的完整代码 #

<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
    <table class="w-full text-md  bg-white shadow-md rounded">
        <thead>
        <tr class="border-b">
            <th class="text-left p-3 px-5">Name</th>
            <th class="text-left p-3 px-5">Email</th>
            <th class="text-left p-3 px-5">Team</th>

            <th class="text-left p-3 px-5">Role</th>
            <th></th>
        </tr>
        </thead>
        <tbody >
            @foreach($data as $row)
            <tr class="border-b hover:bg-orange-100 bg-gray-100">
                {{--run function once per user id--}}

                <td class="p-3 px-5"><input type="text"  value="{{$row->vendor_name}}" class="bg-transparent" readonly></td>
                <td class="p-3 px-5" ><input type="text"  value="{{$row->vendor_contact}}" class="bg-transparent" readonly></td>
                <td class="p-3 px-5" ><input type="text"  value="{{$row->vendor_email}}" class="bg-transparent" readonly></td>
                <td class="p-3 px-5" ><input type="text"  value="{{$row->vendor_role}}" class="bg-transparent" readonly></td>


                <td class="p-3 px-5 flex justify-end">
                    <button type="button" wire:click="edit({{ $row->id }})" class="mr-3 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Edit</button>
                    <button type="button" wire:click="delete({{ $row->id }})" class="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Delete</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

修改后，每条数据对应一个独立的<tr>，鼠标悬停任意行都会触发橙色背景的变色效果。

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