reactjs 灵活的表格，其中两个单元格折叠成一个

8zzbczxx 于 12个月前发布在 React

关注(0)|答案(2)|浏览(107)

我正在制作一个包含输入的表格，遇到了一个难题，当屏幕尺寸减小时，需要将两个单元格折叠成一个，而不复制折叠单元格的内容。换句话说，我想只使用媒体查询和CSS来折叠两个单元格，而不复制单元格的内容。我宁愿只使用媒体查询，而不是编程编辑DOM。
更具体地说，我不想要这个：

<thead>
  <tr>
    <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
      Name
  </th>
  <th
    scope="col"
    className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
  >
    Title
  </th>
  <th
    scope="col"
    className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
  >
    Email
  </th>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
  <tr>
    <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-0">
      My Name
      <dl className="font-normal lg:hidden">
        <dt className="sr-only">Title</dt>
        <dd className="mt-1 truncate text-gray-700">My Duplicated Title</dd>
        <dt className="sr-only sm:hidden">My Duplicated Email</dt>
        <dd className="mt-1 truncate text-gray-500 sm:hidden">{person.email}</dd>
      </dl>
    </td>
    <td className="hidden px-3 py-4 text-sm text-gray-500 lg:table-cell">My Title</td>
    <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">My Email</td>
  </tr>
</tbody>

字符串
（我使用顺风，顺便做出React。）
相反，我希望有一种方法可以将单元格折叠到另一个单元格上，而不必复制折叠单元格的内容，最后一种方法是使用window.matchMedia。
不想复制内容的原因是我使用了一个不能复制的输入字段。我希望我说得有道理。

reactjs

来源：https://stackoverflow.com/questions/77466974/flexible-table-where-2-cells-collapse-into-one

2条答案

按热度按时间

aiqt4smr1#

为了完成@AlanGanser的回答，我在这里给出了帮助他解决问题的评论中的例子。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<h1>resize the view to go down to 2 columns ... or go to fullpage to see the 3 cols if already shrinked down.</h1>
<div class="mx-32">
  <table class="w-full px-32 bg-yellow-400">
    <colgroup>
      <col class="border-solid border-current border-2" />
      <col class="bg-gray-400 border-solid border-current border-2" />
      <col class="border-solid border-current border-2" />
    </colgroup>
    <thead>
      <tr class="border-solid border-current border-2">
        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
          Name
        </th>
        <th scope="col" class=" px-3 py-3.5 text-left text-sm font-semibold text-gray-900 md:table-cell block">
          Title
        </th>
        <th scope="col" class=" px-3 py-3.5 text-left text-sm font-semibold text-gray-900 md:table-cell block">
          Email
        </th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 ">
      <tr class="border-solid border-current border-2">
        <td class="  max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-0">
          My Name
          <dl class="font-normal lg:hidden">
            <dt class="sr-only">Title</dt>
            <dd class="mt-1 truncate text-gray-700">My Duplicated Title</dd>
            <dt class="sr-only sm:hidden">My Duplicated Email</dt>
            <dd class="mt-1 truncate text-gray-500 sm:hidden">{person.email}</dd>
          </dl>
        </td>
        <td class=" px-3 py-4 text-sm text-gray-500 md:table-cell block">My Title</td>
        <td class=" px-3 py-4 text-sm text-gray-500 md:table-cell block">My Email</td>
      </tr>
    </tbody>
  </table>
</div>

字符串
原始codepen玩：https://codepen.io/gc-nomade/pen/NWogRqr

赞(0）回复(0）举报 12个月前

sr4lhrrt2#

正如G-Cyrillus所说，解决方案是让<td>具有md:table-cell block类。
以下是一些截图：
大号：
x1c 0d1x的数据
小：

的
table很丑，但我会修好的！