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

Question

我想根据它的父标签的大小来设置<tr>，即具有w-full样式(宽度:100%)的<thead>，但是<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, 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, 202, 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%的宽度？

Answer 1

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

​

​

还有头像

​

​