score:1

please use css in such cases. use grid and flex. css is better optimized for your case. if you need value of width of column td.

js:

import react, { useeffect, useref, usestate } from "react";
import "./style.css";

const app = () => {
  const [size, setsize] = usestate({});
  const ref = useref();

  const resizehandler = () => {
    const { clientheight, clientwidth } = ref.current || {};
    setsize({ clientheight, clientwidth });
  };

  const list1 = ["item 1", "item 2", "item 3", "item 4", "item 5"];
  const list2 = ["lorem item 1", "pixel 2", "set 3", "amet 4", "item 5"];

  useeffect(() => {
    window.addeventlistener("resize", resizehandler);
    resizehandler();
    return () => {
      window.removeeventlistener("resize", resizehandler);
    };
  }, []);

  return (
    <div>
      <table>
        <tbody>
          <tr
            ref={ref}
            style={{
              gridtemplatecolumns: `repeat(${list1.length}, 1fr)`,
            }}
          >
            {list1.map((item, i) => (
              <td classname="nav-item" key={i}>
                {item}
              </td>
            ))}
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr
            style={{
              gridtemplatecolumns: `repeat(${list2.length}, 1fr)`,
            }}
          >
            {list2.map((item, i) => (
              <td key={i}>
                <h3>{item}</h3>
              </td>
            ))}
          </tr>
        </tbody>
      </table>

      <div>width table tr:{size.clientwidth}</div>
    </div>
  );
};

export default app;

css:

tr {
    display: grid;
    width: 100%;
    max-width: 100vw;
}

td {
    border: 1px solid black;
}

table,
tbody {
    display: block;
}

if you don't need width of column td:

import react from "react";
import "./style.css";

const app = () => {
  const list1 = ["item 1", "item 2", "item 3", "item 4", "item 5"];
  const list2 = ["lorem item 1", "pixel 2", "set 3", "amet 4", "item 5"];

  return (
    <div>
      <table>
        <tbody>
          <tr
            style={{
              gridtemplatecolumns: `repeat(${list1.length}, 1fr)`,
            }}
          >
            {list1.map((item, i) => (
              <td classname="nav-item" key={i}>
                {item}
              </td>
            ))}
          </tr>
        </tbody>
      </table>

      <table>
        <tbody>
          <tr
            style={{
              gridtemplatecolumns: `repeat(${list2.length}, 1fr)`,
            }}
          >
            {list2.map((item, i) => (
              <td key={i}>
                <h3>{item}</h3>
              </td>
            ))}
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default app;

css:

tr {
    display: grid;
    width: 100%;
    max-width: 100vw;
}

td {
    border: 1px solid black;
}

table,
tbody {
    display: block;
}

Related Query

More Query from same tag