Reputation: 13

tailwind css only first row is hoverable

This is my table and hover:bg-orange-100 is handling the hover part.

<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>

gif