代码之家 › 专栏 › 技术社区 › mstdmstd

如何使用tailwindcss 2.1制作水平滚动的表格?

tailwind-css

mstdmstd · 技术社区 · 4 年前

我想制作一个内容水平滚动的表格我试着用 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>

但看起来水平滚动适用于所有区域,而不是我的桌子

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

我使用tailwindcss 2.1.0。

谢谢!

0 回复 | 直到 2 年前

PaulMest 2 年前

决定将overflow-x-auto设置为包装div:

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

定义自定义类后:

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

这提供了我需要的功能!

PaulMest 2 年前

我找到了 <table> 受到灵活性的限制。我通常把它转换成简单的 <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>