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;
}
Source: stackoverflow.com
Related Query
- React syncing column width of between tables
- Set Grid Column width between 2 enums in Semantic UI React
- How to pass percentage value to width to React data grid column
- discrepancy in span width between React and pure HTML implementation
- React table - how to merge tables for specific column and cell value
- React Bootstrap Table - Trying To Fill Page With Equal Column Width
- React Bootstrap column not filling entire width
- Syncing state between React app and Firebase database
- How to fix text-align, font size and actions column width on react Material Table?
- How to adjust the width of react flexbox grid items to allow space between them?
- React Material UI Column width property does not expand
- "Options" of column chart not getting applied in react .Also I need to set width and height to 100% of div
- Wrap Text Around Fixed Column Width React Bootstrap Layout
- Griddle Tables : React : Visible set to false not working in column meta data?
- How to Dynamically FIx the header Column width in React Bootstrap-Table-Next with respect to data cell
- What is the difference between React Native and React?
- What is the difference between using constructor vs getInitialState in React / React Native?
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- How can I communicate between related react components?
- React : difference between <Route exact path="/" /> and <Route path="/" />
- Difference between component and container in react redux
- Make view 80% width of parent in React Native
- How to get the width of a react element
- Difference between React Component and React Element
- What's the difference between hydrate() and render() in React 16?
- Correct way to share functions between components in React
- What is the difference between NextJs and Create React App
- How to set image width to be 100% and height to be auto in react native?
- How to keep React component state between mount/unmount?
- react router difference between component and render
More Query from same tag
- Failed to start a project with react
- SVG size in react
- Why Material-UI is not recognizing the theme.spacing function?
- Fetching data from an API: Avoid multiple calls
- Check if state is dirty or clean in React
- Using setFieldValue to send different values based button click
- react-router v4 add query parameter
- State variable is changing when accessed from useEffect()
- React button type changed while passing in a value
- Write data in to nested object in firebase firestore
- How to update react component on parent changes?
- What are the best react hooks, frequency code or performance
- Ignore some installed packages in webpack
- How to make counter buttons persistent after page reload
- How to get objects from firebase firestore snapshots (React Hooks)?
- React-Router 1.0.0RC1 - Passing state as properties to child routes
- react-router why does code continue executing after the transition?
- Create a pure function to merge objects
- How to resolve this reference error : Audio is not defined
- ReactJS rendering Issue fetching an API
- Implement "as" prop in React component in TypeScript
- Material ui 'sx' property does not take the new value of my themeProvider
- Material UI Select Component- A component is changing a controlled input of type text to be uncontrolled
- React-Select multivalue does not populate selected items like in example
- Pass Props to parent componenet in React
- Performance penalty of creating handlers on every render with react-hooks
- use ref to remove html node?
- How to fix expected to return a value at the end of arrow function warning in react js?
- Call Firebase HTTPS callable cloud functions in React
- How to export const to other components react?