这是我的表,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 >
<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>

我如何使它适用于每一行?
发布于 2022-10-06 07:04:17
只需在@foreach($data as $row)和<tr class="border-b hover:bg-orange-100 bg-gray-100">上上升一行
发布于 2022-10-06 07:07:12
尝试将您的@foreach放在<td>之前
https://stackoverflow.com/questions/73969660
复制相似问题