Question 284133 in Html Question posted in
Some basic documentation can be found here.

Html – Flexible table where 2 cells collapse into one

I am making a table with inputs and I ran into the challenge of needing to collapse two cells into one when the screen size decreases without duplicating the content of the cell that collapses. In other words, I want to use only media queries and CSS to collapse the two cells without duplicating the cells content. I would rather only use media queries than programmatically edit the DOM.

To be more specific, I don’t want this:

<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>

(I’m using tailwind and react by the way.)

Instead, I want a way of collapsing cells onto one another without having to duplicate the content of the collapsed cell. My last resort would be to use window.matchMedia.

The reason not wanting to duplicate content is that I am using an input field that cannot be duplicated. I hope I made sense.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As G-Cyrillus has stated, the solution was to make the <td> have the classes md:table-cell block.

    Here are some screenshots:

    Large:

    large screen width screenshot

    Small:

    small screen width screenshot

    Very ugly tables but I'll fix that!


  2. 0

    To complete @AlanGanser answer, i put here the example given in the comments that helped him to sort it out.

    <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>

    original codepen to play with: https://codepen.io/gc-nomade/pen/NWogRqr

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search