使用内联 CSS 将表格转换为 HTML [已关闭]

Answer 1

您可以通过删除每个 div 中的第二个表格行来稍微调整它，并仅使用表格标题和类似段落标记的内容来设置表格标题的样式，而段落标记位于它们之间。

<div>
    <tr>
        <th style="backgroud-color: #e3e9e5; text-align: center; padding: 0.5em; border-radius: 10px;">M&M
            <p style="color: #19C353; text-align: center;">+4.5%</p>
        </th>
        <th style="backgroud-color: #e3e9e5; text-align: center; padding: 0.5em; border-radius: 10px;">Tech M
            <p style="color: #E82619; text-align: center;">-1.9%</p>
        </th>  
    </tr>
</div>

Answer 2

•  grid-template-rows: auto; align-items: stretch; padding: 50px;"> <div
   style="border-radius: 10px; padding: 0.5em; "> <tr> <th
   style="border-radius: 10px; padding: 0.5em; background-color:
   #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px;
   padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech
   M <p style="color: #E82619; text-align: center;">-1.9%</p> </th>
   </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr>
   <th style="border-radius: 10px; padding: 0.5em; background-color:
   #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px;
   padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech
   M <p style="color: #E82619; text-align: center;">-1.9%</p> </th>
   </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr>
   <th style="border-radius: 10px; padding: 0.5em; background-color:
   #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px;
   padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech
   M <p style="color: #E82619; text-align: center;">-1.9%</p> </th>
   </tr> </div> <div style="border-radius: 10px; padding: 0.5em; "> <tr>
   <th style="border-radius: 10px; padding: 0.5em; background-color:
   #e3e9e5; text-align: center;">M&M <p style="color: #19C353; text-align: center;">+4.5%</p> </th> <th style="border-radius: 10px;
   padding: 0.5em; background-color: #e3e9e5; text-align: center;">Tech
   M <p style="color: #E82619; text-align: center;">-1.9%</p> </th>
   </tr> </div> </table> </center> </body> </html>