How to use curved table only using CSS-CodePudding

I need to convert following image into a HTML with pure CSS without using any 3rd part CSS references. I have tried the following code snippet. It's code fiddle as follows,

CodePudding user response：

Maybe like following snippet, with list and flex:

<div style="display: flex; justify-content:center;">
    <div style="padding: 1em; z-index: -1; background: rgb(79,206,213); background: linear-gradient(180deg, rgba(79,206,213,.1) 0%, rgba(20,173,227,.1) 50%, rgba(253,0,243,.1) 100%);">
      <div style="border-radius: 1em; padding: 3em 1em 1em 1em; z-index: 0; background: white;">
        <p style='margin-bottom:2em;font-size:26px;font-family:"Calibri",sans-serif;text-align:center;'>Transaction Summary</p>
        <p style='margin-bottom:1em;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:15px;color:#AFABAB;">Amount</span></p>
        <p style='margin-bottom:1em;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:15px;color:#AFABAB;">LKR&nbsp;</span><strong><span style="font-size:28px;color:#0070C0;">2,000.00</span></strong></p>
        <p style='margin-bottom:2em;text-align:center;'><span style="font-size:15px;font-size:18px;font-family:'Calibri',sans-serif;color:#333;">Commercial Bank</span></p>
        <ul style="display: flex;flex-direction:column;list-style:none;width:319.5pt;row-gap: .5em;margin-bottom: 2em; padding: 0 2em; font-family:'Calibri',sans-serif;font-size:15px;">
          <li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
            <span style="color:grey;">Payment type</span>
            <span style="color:#333;text-align:right;font-weight:600;">Fund Transfer</span>
          </li>
          <li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
            <span style="color:grey;">Paid to</span>
            <span style="color:#333;text-align:right;font-weight:600;">1234567r</span>
          </li>
          <li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
            <span style="color:grey;">Bank</span>
            <span style="color:#333;text-align:right;font-weight:600;">Rdb Bank</span>
          </li>
          <li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
            <span style="color:grey;">Date of time</span>
            <span style="color:#333;text-align:right;font-weight:600;">16-Aug-2021 11:50</span>
          </li>
          <li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
            <span style="color:grey;">Payment Status</span>
            <span style="color:#333;text-align:right;font-weight:600;">Success</span>
          </li>
          <li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
            <span style="color:grey;">Reference number</span>
            <span style="color:#333;text-align:right;font-weight:600;">32322</span>
          </li>
          <li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
            <span style="color:grey;">Remark</span>
            <span style="color:#333;text-align:right;font-weight:600;">Monthly bonus</span>
          </li>
        </ul>
        <p style='border-top:1px solid #e3e3e3;'></p>
        <p style='font-size:12px;font-family:"Calibri",sans-serif;text-align:center;'><span style="color:#2E75B6;">Aug-2021 12:56 PM</span></p>
      </div>
    </div>
  </div>

CodePudding user response：

Solution is using from multiple div and flex instead table:

<html>

<body>

  <p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'>&nbsp;</p>
  <p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'>Transaction Summary</p>
  <p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:12px;line-height:107%;color:#AFABAB;">Amount</span></p>
  <p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:11px;line-height:107%;color:#AFABAB;">LKR&nbsp;</span><strong><span style="font-size:16px;line-height:107%;color:#0070C0;">2,000.00</span></strong></p>
  <p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:12px;line-height:107%;">Commercial Bank</span></p>
  <p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:12px;line-height:107%;">&nbsp;</span></p>
  <div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
    <div>Payment type</div>
    <div>Fund Transfer</div>
  </div>
  <div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
    <div>Paid to</div>
    <div>1234567</div>
  </div>
  <div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
    <div>Bank</div>
    <div>Rdb Bank</div>
  </div>
  <div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
    <div>Date of time</div>
    <div>16-Aug-2021 11:50</div>
  </div>
  <div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
    <div>Payment Status</div>
    <div>Success</div>
  </div>
  <div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
    <div>Reference number</div>
    <div>32322</div>
  </div>
  <div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
    <div>Remark</div>
    <div>Monthly bonus</div>
  </div>

  <p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="color:#2E75B6;">&nbsp;</span></p>
  <p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="color:#2E75B6;">&nbsp;</span></p>

</body>

</html>