주식 차트 표 만드는데 어려움이 있습니다..

[김지수]

글자 간격이 일정하게 정렬이 되지 않습니다. 제가 어떤걸 놓친걸까요?

HTML  코드 입니다.

<div style="background-color: #0b0f19; position: relative; padding-top: 3rem; padding-bottom: 3rem;">
<div style="width: 100%;"></div>
<div style=" width: 100%; box-sizing: border-box; padding-left: 100px; padding-right: 100px; overflow: hidden;" >
<!--Title-->
<div style="text-align: center; margin-bottom: 0.5rem;">
<div style="padding-top: 0.5rem;">
<h2 style="color: white; font-size: calc(1.375rem + 1.5vw); font-weight: 800; line-height: 1.3;"> Buy crpto at true cost </h3>
<p style="color: antiquewhite; font-size: 1.125rem;"> Egestas ullamcorper posuere tortor eget netus elementum dui eu cras eros accumsan, ullamcorper tortor gula dui in netus </p>
</div>
</div>
<!--Table-->
<div style="width: 100%; padding-top: 1rem; padding-bottom: 1rem; ">
<!--Row-->
<div style="width: 100%; display: table; padding-top: 1.5rem; padding-bottom: 1.5rem">
<div>
<div style="display: table-cell">
< img src="../img/project img/btc.png" alt="" style="width: 32px; height: 30px; vertical-align: middle;" >
<span style="color: white;">Bitcoin</span>
<span style="color: blanchedalmond; opacity: .6;"> BTC</span>
</div>
</div>
 
<div style="color: white; display: table-cell;">
 $38,940,63
</div>
<div style="color: green; display: table-cell;">
 +1.70 %
</div>
<div style="color: white; display: table-cell;">
 $736,124,602,60.97 
</div>
<div style="display: table-cell;">
< img src="../img/project img/btc.svg" style="width: 100px;">
</div>
<div>
<button class="chart_button" style="display: table-cell;">
 Trade
</button>
</div>
</div>
<!--row-->
<div style="width: 100%; display: table; padding-top: 1.5rem; padding-bottom: 1.5rem">
<div>
<div style="display: table-cell">
< img src="../img/project img/usdt.png" alt="" style="width: 32px; height: 30px; vertical-align: middle;" >
<span style="color: white;">Tether</span>
<span style="color: blanchedalmond; opacity: .6;"> USDT </span>
</div>
</div>
 
<div style="color: white; display: table-cell;">
 $15.09
</div>
<div style="color: red; display: table-cell;">
 -0.27 %
</div>
<div style="color: white; display: table-cell;">
 $14,735,584,883.68 
</div>
<div style="display: table-cell;">
< img src="../img/project img/usdt.svg" style="width: 100px;">
</div>
<div>
<button class="chart_button" style="display: table-cell;">
 Trade
</button>
</div>
</div>
<!--row-->
<div style="width: 100%; display: table; padding-top: 1.5rem; padding-bottom: 1.5rem;">
<div>
<div style="display: table-cell">
< img src="../img/project img/eth.png" alt="" style="width: 32px; height: 30px; vertical-align: middle;" >
<span style="color: white;">Ethereumn</span>
<span style="color: blanchedalmond; opacity: .6;"> BTC</span>
</div>
</div>
 
<div style="color: white; display: table-cell;">
 $2,879.07
</div>
<div style="color: green; display: table-cell;">
 +1.27 %
</div>
<div style="color: white; display: table-cell;">
 $337,863,906,048,53
</div>
<div style="display: table-cell;">
< img src="../img/project img/eth.svg" style="width: 100px;">
</div>
<div>
<button class="chart_button" style="display: table-cell;">
 Trade
</button>
</div>
</div>

<div style="width: 100%; display: table; padding-top: 1.5rem; padding-bottom: 1.5rem">
<div>
<div style="display: table-cell">
< img src="../img/project img/dot.png" alt="" style="width: 32px; height: 30px; vertical-align: middle;" >
<span style="color: white;">Polkadot</span>
<span style="color: blanchedalmond; opacity: .6;"> BTC</span>
</div>
</div>
 
<div style="color: white; display: table-cell;">
 $13.28
</div>
<div style="color: red; display: table-cell;">
 -1.35 %
</div>
<div style="color: white; display: table-cell;">
 $26,143,724,006.81
</div>
<div style="display: table-cell;">
< img src="../img/project img/dot.svg" style="width: 100px;">
</div>
<div>
<button class="chart_button" style="display: table-cell;">
 Trade
</button>
</div>
</div>
 
</div>
</div>

[codingapple]

테이블 셀의 폭을 고정된 값으로 줘야할듯요

[글쓴이]

글