如何使表格占据所有水平空间 TailwindCSS (React)答案

【问题标题】：How to make table take up all horizontal space TailwindCSS (React)如何使表格占据所有水平空间 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 元素内，该元素位于具有两列的网格内。无论我尝试什么，桌子都拒绝占用空白的水平空间。任何想法或帮助将不胜感激！

【问题讨论】：

标签： css reactjs tailwind-css tsx

【解决方案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>

【讨论】：

是的，它有效！非常感谢
不客气！ ;-)