Why You Should Use Only One <caption> in React Tables (and How to Add a Footer)

#html #a11y #frontend #react

When working with tables in React (or plain HTML), you might run into a situation where you want to display two captions: one at the top and another at the bottom. I recently faced this exact problem in my React app. Here’s what I discovered, why it happens, and how to solve it in a way that works across all browsers.

🚩 The Problem: Multiple

Elements Don’t Work Consistently
According to the HTML specification, a

must have at most one , and it must be the first child of the

element. If you try to add more than one , or place a anywhere except as the first child, browser behavior becomes unpredictable:

Chrome: Sometimes renders both captions, even if the second is after the

Firefox: Only renders the first

, and ignores any others, or those not in the correct position.

This means your table might look fine in Chrome, but the second caption will be missing in Firefox. This is because each browser implements the HTML spec in its own way, and only the first

(as the first child) is guaranteed to be shown everywhere.

🧑‍💻 My Experience
While building a React table, I tried to add a second

at the bottom for extra context. It worked in Chrome, but when I checked in Firefox, the second caption was simply not rendered. Even moving the second below the inside the

didn’t help-Firefox still ignored it. That’s when I realized this is a cross-browser issue, not a bug in my code.

✅ The Solution: Use One

+ Custom Footer
If you want a second caption or footer, don’t use a second . Instead, use a single semantic for accessibility, and render any additional content outside the table, styled as needed (especially easy with Tailwind CSS).

Here’s How You Can Do It in React + Tailwind:

function MyTable({ data, footer }) {
  return (
    <div className="overflow-x-auto">
      <table className="min-w-full border border-gray-300">
        {/* Top Caption (semantic, accessible) */}
        <caption className="caption-top text-lg font-semibold mb-2">
          Main Table Caption
        </caption>
        <thead>
          <tr>
            <th className="border-b px-4 py-2">Header 1</th>
            <th className="border-b px-4 py-2">Header 2</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row, i) => (
            <tr key={i}>
              <td className="border-b px-4 py-2">{row.col1}</td>
              <td className="border-b px-4 py-2">{row.col2}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {/* Custom Footer or "Second Caption" */}
      <div className="mt-2 text-center text-gray-600">{footer}</div>
    </div>
  );
}

This approach guarantees your table is accessible and looks consistent in all browsers. You can pass any ReactNode as the footer, giving you full flexibility for content and styling.

📚 References
MDN Web Docs:

element – Official documentation on correct usage and limitations of the tag.

Working With Tables in React: How to Render and Edit Fetched Data (dev.to) – A practical overview of rendering tables in React, including best practices for structure and accessibility.

💡 Takeaway
Always use only one

as the first child of your table.

For extra captions/footers, use a custom element outside the table.

Don’t trust browser quirks-write code that’s consistent and accessible everywhere.

Let me know if you’ve run into similar cross-browser issues, or if you have other table best practices to share!