如何用tailwindcss 2.1制作具有水平滚动功能的表格？

Question

我想让表格的内容具有水平滚动功能，并尝试对内容较长的表格单元格使用whitespace nowrap类，对所有表格使用overflow-x-auto，例如：

<div class="editor_listing_wrapper_bix_width">


    <table class=" overflow-x-auto p-1 m-1 d2">
        <thead class="bg-gray-700 border-b-2 border-t-2 border-gray-300">
        <tr>
            <th class="w-1/12 py-2">Id</th>
            <th class="w-4/12 py-2">Name</th>
            <th class="w-4/12 py-2">Description</th>
            <th class="w-1/12 py-2"></th>
        </tr>
        </thead>
        <tbody>

        <tr>

            <td>1</td>
            <td class="whitespace-nowrap">
                Laptops
                <small class="pl-2 pt-1">
                    ( Used in 2 ad(s) )
                </small>
            </td>

            <td class="whitespace-nowrap p-1">Laptops description Lorem ipsum dolor sit amet,
                consectetur
                adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua....
            </td>

但看起来水平滚动适用于所有区域，而不适用于我的表格

请看看pen：https://codepen.io/sergeynilov/pen/eYgjVgM

我使用的是tailwindcss 2.1.0。

谢谢！

Answer 1

决定是在包装div中设置overflow-x-auto：

<div class="overflow-x-auto">
    <table class="editor_listing_table">

定义了自定义类后：

.editor_listing_table {
    @apply w-full p-2 m-1;
}

这提供了我需要的功能！

Answer 2

我发现桌子的灵活性是有限的。我通常将它转换为一个简单的div，然后相应地向前移动。检出此demo。

<div>
  <div id="header" class="flex items-center bg-gray-100 h-10 px-4">
    <div class="w-2/12 font-semibold">Id</div>
    <div class="w-2/12 font-semibold">Name</div>
    <div class="w-6/12 font-semibold">Description</div>
    <div class="w-2/12 font-semibold">Actions</div>
  </div>

  <div id="body" class="px-4 space-y-4">
    <div class="flex">
      <div class="w-2/12">1</div>
      <div class="w-2/12">John</div>
      <div class="w-6/12 max-h-20 overflow-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem corporis sed, porro saepe rerum illum minus ipsa tenetur animi sint cupiditate dolorem! Laboriosam, aperiam expedita aliquid impedit provident non corporis?Reiciendis tempore soluta nisi ratione voluptates cupiditate. Deserunt possimus repellendus repellat, nobis maiores accusantium minima? Temporibus commodi iusto necessitatibus, rerum vel maxime totam veniam, natus quaerat voluptate perferendis maiores porro.</div>
      <div class="w-2/12">Edit</div>
    </div>

    <div class="flex">
      <div class="w-2/12">2</div>
      <div class="w-2/12">Jane</div>
      <div class="w-6/12 max-h-20 overflow-auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, necessitatibus vitae itaque maxime cupiditate dicta maiores, assumenda animi unde sapiente deserunt, repellat commodi distinctio corrupti! Esse est error corrupti repudiandae. Aliquam expedita cupiditate, eligendi voluptate consectetur illo ea iure excepturi perspiciatis, ut deleniti ullam. Illum quidem ea hic animi nemo, vitae adipisci nesciunt neque praesentium dolor expedita nulla quaerat itaque? Sint necessitatibus dolor ab sed. Fugit ab architecto sit voluptate, officia similique explicabo, quia earum iure, aliquam hic. Nostrum voluptatum beatae ullam porro minus voluptate debitis nemo expedita, quasi deleniti.</div>
      <div class="w-2/12">Edit</div>
    </div>
  </div>
</div>