首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >顺风css只有第一行是可悬浮的。

顺风css只有第一行是可悬浮的。
EN

Stack Overflow用户
提问于 2022-10-06 06:52:18
回答 2查看 98关注 0票数 0

这是我的表,hover:bg-orange-100正在处理悬停部分。

代码语言:javascript
运行
复制
<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>

我如何使它适用于每一行?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-10-06 07:04:17

只需在@foreach($data as $row)<tr class="border-b hover:bg-orange-100 bg-gray-100">上上升一行

票数 1
EN

Stack Overflow用户

发布于 2022-10-06 07:07:12

尝试将您的@foreach放在<td>之前

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73969660

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档