Expected server HTML to contain a matching <tr> in <table> / Hydration failed because the initial UI does not match what was rendered on the server

Question

Next js 13.2.3

Next js cannot use the table element.

"use client";
export default function index() {
  return (
            <table>
                <tr>
                    <th>Company</th>
                    <th>Contact</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <td>Alfreds Futterkiste</td>
                    <td>Maria Anders</td>
                    <td>Germany</td>
                </tr>
                <tr>
                    <td>Centro comercial Moctezuma</td>
                    <td>Francisco Chang</td>
                    <td>Mexico</td>
                </tr>
            </table>
  )
}

It works but I get an error.

Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <tr> in <table>.

Should I stop using this element or can I fix the problem?

https://stackblitz.com/edit/nextjs-jvjltx?file=app%2Fpage.js - example

Answer 1

This issue has been reported here: https://github.com/vercel/next.js/discussions/36754

Wrapping the table content with thead and tbody solves it.

export default function index() {
  return (
    <table>
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
      </tbody>
    </table>
  );
}

Fix: https://stackblitz.com/edit/nextjs-xb5mix?file=app/page.js