I am struggling with aligning the heading and entries in my table properly.
https://i.stack.imgur.com/IYtY1.jpg
My goal is to ensure that the heading and entries are perfectly aligned with each other.
This is how my Table.jsx looks like:
<div className="home-trending">
<h1 className="home-trending-heading"> CRYPTO TRENDING ON DEX</h1>
<div className="cex-trending-data">
<div className="dex-content-heading bold">
<p className="cex-content-heading-item">Chain</p>
<p className="cex-content-heading-item">Token Amount (out)</p>
<p className="cex-content-heading-item">Token Amount (in)</p>
<p className="cex-content-heading-item">TXN Value</p>
<p className="cex-content-heading-item">Wallet Type</p>
<p className="cex-content-heading-item">Time</p>
<p className="cex-content-heading-item">Twitter</p>
</div>
{topDEXTrades.slice(0, 10).map((trade) => {
return (
<TrendingDexRows
chain={trade.chain_name}
time={trade.trade_time}
token_out={trade.token_out}
token_in={trade.token_in}
trade_id={trade.id}
symbol_out={trade.symbol_out}
symbol_in={trade.symbol_in}
value={trade.txn_value}
hash={trade.txn_hash}
wallet={trade.wallet}
category={trade.category}
timeToGo={timeToGoSec}
href={twitterHref}
detailedView={true}
view="large"
/>
);
})}
</div>
</div>
And this is my Table.css styling:
.dex-content-heading {
display: flex;
justify-content: space-between;
}
As for the Rows.jsx, here is a snippet of the code:
<div>
<div className="cex-trending-row">
<div className="cex-trending-row-name row-item">
<img
src={chainIcon(props.chain)}
alt="btc"
className="base-asset-img"
/>
<p className="trending-symbol">{props.chain}</p>
</div>
<p className="row-item bold">{millify(props.token_out)}</p>
<p className="row-item bold">{millify(props.token_in)}</p>
<p className="row-item bold">{millify(props.value)}</p>
<p className="row-item" style={categoryStyle(props.category)}>
{categoryName(props.category)}
</p>
<p className="row-item"> {props.timeToGo(props.time)}</p>
<div>
<a
href={props.href(
props.value,
props.token_out,
props.token_in,
props.chain,
props.symbol_out,
props.symbol_in
)}
target="_blank"
rel="noreferrer"
style={{ textDecoration: "none", paddingRight: "25px" }}
>
<img
src={Twitter}
alt="twitter"
className="graph-icon-img-dex"
style={{ marginLeft: "10px" }}
/>
</a>
</div>
</div>
<hr className="horrizontal-line" />
</div>
Lastly, the Row.css contains the following styles:
.cex-trending-row {
display: flex;
}
.row-item {
flex: 1;
}
The issue I am facing is that the heading and rows are not aligned as desired. How can I ensure both are perfectly aligned? Is there a specific flex property that should be used to achieve equal spacing between items in both divs?