为什么不能在 Tailwind css 中将 <tr> 设置为其 100% 的宽度

问题描述

我想根据其父标签的大小设置 <tr>，即 <thead> 具有 w-full 样式（宽度：100%），但 <tr> 的宽度没有满足成为父级的 <thead> 标签的大小。

这是我尝试过但没有找到解决方案的代码。

        <table className="w-full my-5">
            {/* table header  */}
            <div className="bg-white p-5 px-10 rounded-xl flex items-center" style={{BoxShadow: '2px 2px 10px rgba(202,202,.5)'}}>
            <thead className="w-full">
                <tr className="w-full space-x-5">
                    <th className="">#</th>
                    <div className="grid grid-cols-4 gap-12 w-full pl-7">
                        <td className="px-5 min-w-max">
                            <strong>Nama</strong>
                            <div className="relative mt-2">
                                <div className="absolute pl-2 right-3 flex items-center h-full">
                                    <svg className="text-gray-400 w-5 h-5">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.965 14.255h.79l4.99 5-1.49 1.49-5-4.99v-.79l-.27-.28a6.471 6.471 0 01-4.23 1.57 6.5 6.5 0 116.5-6.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5z" fill="#000" fill-opacity=".54"/>
                                    </svg>
                                </div>
                                <input type="text" className="bg-white pr-10 pl-3 h-8 w-full border border-blue-300 rounded-xl focus:outline-none focus:ring-2 ring-blue-400 ring-opacity-25 text-sm font-light"/>
                            </div>
                        </td>
                        <td className="px-5 min-w-max">
                            <strong>Nomor Telepon</strong>
                            <div className="relative mt-2">
                                <div className="absolute pl-2 right-3 flex items-center h-full">
                                    <svg className="text-gray-400 w-5 h-5">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.965 14.255h.79l4.99 5-1.49 1.49-5-4.99v-.79l-.27-.28a6.471 6.471 0 01-4.23 1.57 6.5 6.5 0 116.5-6.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5z" fill="#000" fill-opacity=".54"/>
                                    </svg>
                                </div>
                                <input type="text" className="bg-white pr-10 pl-3 h-8 w-full border border-blue-300 rounded-xl focus:outline-none focus:ring-2 ring-blue-400 ring-opacity-25 text-sm font-light"/>
                            </div>
                        </td>
                        <td className="px-5 min-w-max">
                            <strong>Email</strong>
                            <div className="relative mt-2">
                                <div className="absolute pl-2 right-3 flex items-center h-full">
                                    <svg className="text-gray-400 w-5 h-5">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.965 14.255h.79l4.99 5-1.49 1.49-5-4.99v-.79l-.27-.28a6.471 6.471 0 01-4.23 1.57 6.5 6.5 0 116.5-6.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5z" fill="#000" fill-opacity=".54"/>
                                    </svg>
                                </div>
                                <input type="text" className="bg-white pr-10 pl-3 h-8 w-full border border-blue-300 rounded-xl focus:outline-none focus:ring-2 ring-blue-400 ring-opacity-25 text-sm font-light"/>
                            </div>
                        </td>
                        <td className="px-5 min-w-max">
                            <strong>Alamat</strong>
                            <div className="relative mt-2">
                                <div className="absolute pl-2 right-3 flex items-center h-full">
                                    <svg className="text-gray-400 w-5 h-5">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.965 14.255h.79l4.99 5-1.49 1.49-5-4.99v-.79l-.27-.28a6.471 6.471 0 01-4.23 1.57 6.5 6.5 0 116.5-6.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5z" fill="#000" fill-opacity=".54"/>
                                    </svg>
                                </div>
                                <input type="text" className="bg-white pr-10 pl-3 h-8 w-full border border-blue-300 rounded-xl focus:outline-none focus:ring-2 ring-blue-400 ring-opacity-25 text-sm font-light"/>
                            </div>
                        </td>
                    </div>
                </tr>
            </thead>
            </div>
            {/* end of table header  */}
            
            {/* Start of table body  */}
            {/* <div className="bg-white my-3 justify-centerp-5 px-10 rounded-xl flex items-center" style={{BoxShadow: '2px 2px 10px rgba(202,.5)'}}>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Maulana</td>
                    <td>099687676876</td>
                    <td>Example</td>
                    <td>Example</td>
                </tr>
            </tbody>
            </div> */}
            {/* End of table body  */}
        </table>

有没有办法让 <tr> 具有 100% 的宽度？

解决方法

html 有点乱，但你的 tr 占用了 100%

和头