如何使表格占据所有水平空间 TailwindCSS (React)
Posted
技术标签:
【中文标题】如何使表格占据所有水平空间 TailwindCSS (React)【英文标题】：How to make table take up all horizontal space TailwindCSS (React) 【发布时间】：2022-01-21 06:46:04 【问题描述】：我无法让使用 Tailwind 样式的表格占用父 div 中的所有水平空间：
这是 TSX 中表格的代码。
<div className="flex flex-col grow w-max">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-x-auto border-b border-gray-200 sm:rounded-lg">
<table className="table-fixed border-separate -sm:hidden empty-cells-hidden mx-auto my-auto">
<thead className="rounded-tl rounded-tl bg-gray-200 uppercase">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
(column covered in red)
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Date
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Address
</th>
</tr>
</thead>
<tbody className="bg-white divide-gray-100 divide-y ">
this.state.data
.map((t: any) =>
return
strp: t.strpClaimed,
date: new Date(t.date).toLocaleDateString(),
address: t.address,
;
)
.map((e: any, i: number) =>
return (
<tr key=i className="odd:bg-white even:bg-gray-100">
<td className="px-6 py-4 whitespace-nowrap">
e.strp
</td>
<td className="px-6 py-4 whitespace-nowrap">
e.date
</td>
<td className="px-6 py-4 whitespace-nowrap">
<Link
href=`https://etherscan.io/address/$e.address`
>
<a className="underline-solid underline truncate">
e.address.slice(0, 8) + "..."
</a>
</Link>
</td>
</tr>
);
)
</tbody>
</table>
</div>
</div>
</div>
</div>
我曾尝试使用 flex 和 grow，但无济于事。该表位于父 div 元素内，该元素位于具有两列的网格内。无论我尝试什么，桌子都拒绝占用空白的水平空间。任何想法或帮助将不胜感激！
【问题讨论】：
【参考方案1】：尝试使用w-screen 到table 类。它应该在你的情况下正常工作;-)
<table className="table-fixed border-separate -sm:hidden empty-cells-hidden mx-auto my-auto w-screen">
例子：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<table class="table-auto border-separate border border-gray-400 w-screen">
<thead>
<tr>
<th class="border border-gray-300">Song</th>
<th class="border border-gray-300">Artist</th>
<th class="border border-gray-300">Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-gray-300">The Sliding Mr. Bones (Next Stop, Pottersville)</td>
<td class="border border-gray-300">Malcolm Lockyer</td>
<td class="border border-gray-300">1961</td>
</tr>
<tr>
<td class="border border-gray-300">Witchy Woman</td>
<td class="border border-gray-300">The Eagles</td>
<td class="border border-gray-300">1972</td>
</tr>
<tr>
<td class="border border-gray-300">Shining Star</td>
<td class="border border-gray-300">Earth, Wind, and Fire</td>
<td class="border border-gray-300">1975</td>
</tr>
</tbody>
</table>
</table>
</body>
</html>【讨论】：
是的，它有效！非常感谢 不客气！ ;-)以上是关于如何使表格占据所有水平空间 TailwindCSS (React)的主要内容，如果未能解决你的问题，请参考以下文章
Android开发点滴 - 如何使按钮水平垂直居中且始终占据屏幕宽度一半