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


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 (
{/* Top Caption (semantic, accessible) */} {data.map((row, i) => ( ))}
Main Table Caption
Header 1 Header 2
{row.col1} {row.col2}
{/* Custom Footer or "Second Caption" */}
{footer}
); }

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!