[英]How to use curved table only using CSS
我需要將以下圖像轉換為具有純 CSS 的 HTML 而不使用任何第三部分 CSS 參考。 我已經嘗試了以下代碼片段。 它的代碼小提琴如下,
https://jsfiddle.net/7jdmgfnx/
<!DOCTYPE html>
<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;'> </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 </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%;"> </span></p>
<table style="width:319.5pt;margin-left:-36.25pt;border-collapse:collapse;border: none; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 2.25in;border: 1pt solid windowtext;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;'><span style="font-size:13px;line-height:200%;color:#7F7F7F;">Payment type</span></p>
</td>
<td style="width: 157.5pt;border-top: 1pt solid windowtext;border-right: 1pt solid windowtext;border-bottom: 1pt solid windowtext;border-image: initial;border-left: none;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;text-align:right;'><strong><span style="font-size:13px;line-height:200%;">Fund Transfer</span></strong></p>
</td>
</tr>
<tr>
<td style="width: 2.25in;border-right: 1pt solid windowtext;border-bottom: 1pt solid windowtext;border-left: 1pt solid windowtext;border-image: initial;border-top: none;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;'><span style="font-size:13px;line-height:200%;color:#7F7F7F;">Paid to</span></p>
</td>
<td style="width: 157.5pt;border-top: none;border-left: none;border-bottom: 1pt solid windowtext;border-right: 1pt solid windowtext;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;text-align:right;'><strong><span style="font-size:13px;line-height:200%;">1234567</span></strong></p>
</td>
</tr>
<tr>
<td style="width: 2.25in;border-right: 1pt solid windowtext;border-bottom: 1pt solid windowtext;border-left: 1pt solid windowtext;border-image: initial;border-top: none;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;'><span style="font-size:13px;line-height:200%;color:#7F7F7F;">Bank</span></p>
</td>
<td style="width: 157.5pt;border-top: none;border-left: none;border-bottom: 1pt solid windowtext;border-right: 1pt solid windowtext;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;text-align:right;'><strong><span style="font-size:13px;line-height:200%;">Rdb Bank</span></strong></p>
</td>
</tr>
<tr>
<td style="width: 2.25in;border-right: 1pt solid windowtext;border-bottom: 1pt solid windowtext;border-left: 1pt solid windowtext;border-image: initial;border-top: none;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;'><span style="font-size:13px;line-height:200%;color:#7F7F7F;">Date of time</span></p>
</td>
<td style="width: 157.5pt;border-top: none;border-left: none;border-bottom: 1pt solid windowtext;border-right: 1pt solid windowtext;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;text-align:right;'><strong><span style="font-size:13px;line-height:200%;">16-Aug-2021 11:50</span></strong></p>
</td>
</tr>
<tr>
<td style="width: 2.25in;border-right: 1pt solid windowtext;border-bottom: 1pt solid windowtext;border-left: 1pt solid windowtext;border-image: initial;border-top: none;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;'><span style="font-size:13px;line-height:200%;color:#7F7F7F;">Payment Status</span></p>
</td>
<td style="width: 157.5pt;border-top: none;border-left: none;border-bottom: 1pt solid windowtext;border-right: 1pt solid windowtext;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;text-align:right;'><strong><span style="font-size:13px;line-height:200%;">Success</span></strong></p>
</td>
</tr>
<tr>
<td style="width: 2.25in;border-right: 1pt solid windowtext;border-bottom: 1pt solid windowtext;border-left: 1pt solid windowtext;border-image: initial;border-top: none;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;'><span style="font-size:13px;line-height:200%;color:#7F7F7F;">Reference number</span></p>
</td>
<td style="width: 157.5pt;border-top: none;border-left: none;border-bottom: 1pt solid windowtext;border-right: 1pt solid windowtext;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;text-align:right;'><strong><span style="font-size:13px;line-height:200%;">32322</span></strong></p>
</td>
</tr>
<tr>
<td style="width: 2.25in;border-right: 1pt solid windowtext;border-bottom: 1pt solid windowtext;border-left: 1pt solid windowtext;border-image: initial;border-top: none;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;'><span style="font-size:13px;line-height:200%;color:#7F7F7F;">Remark</span></p>
</td>
<td style="width: 157.5pt;border-top: none;border-left: none;border-bottom: 1pt solid windowtext;border-right: 1pt solid windowtext;padding: 0in 5.4pt;vertical-align: top;">
<p style='margin-top:0in;margin-right:0in;margin-bottom:0in;margin-left:0in;line-height:200%;font-size:15px;font-family:"Calibri",sans-serif;text-align:right;'><strong><span style="font-size:13px;line-height:200%;">Monthly bonus</span></strong></p>
</td>
</tr>
</tbody>
</table>
<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;"> </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;"> </span></p>
</body>
</html>
但是可以看到,它的 output 和下圖不一樣。
請幫我解決這個問題。
可能像下面的代碼片段,帶有列表和 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 </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>
解決方案是使用多個div
和flex
代替表:
<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;'> </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 </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%;"> </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;"> </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;"> </span></p> </body> </html>
這里有表:
<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 </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> <table style="margin:0 auto;width:319.5pt;row-gap: .5em;margin-bottom: 2em; padding: 0 2em; font-family:'Calibri',sans-serif;font-size:15px;border-colapse:collapse;border-spacing:0.5em"> <tbody> <tr style="width:100%;margin-bottom: 1em;"> <td style="color:grey;border:1px solid #e3e3e3;padding: .5em; border-style:solid none;padding:.5em;border-left:1px solid #e3e3e3;border-top-left-radius:.5em;border-bottom-left-radius:.5em;">Payment type</td> <td style="color:#333;text-align:right;font-weight:600;border:1px solid #e3e3e3;padding: .5em;border-left:none;border-top-right-radius:.5em;border-bottom-right-radius:.5em;">Fund Transfer</td> </tr> <tr style="width:100%;margin-bottom: 1em;"> <td style="color:grey;border:1px solid #e3e3e3;padding: .5em; border-style:solid none;padding:.5em;border-left:1px solid #e3e3e3;border-top-left-radius:.5em;border-bottom-left-radius:.5em;">Paid to</td> <td style="color:#333;text-align:right;font-weight:600;border:1px solid #e3e3e3;padding: .5em;border-left:none;border-top-right-radius:.5em;border-bottom-right-radius:.5em;">1234567r</td> </tr> <tr style="width:100%;margin-bottom: 1em;"> <td style="color:grey;border:1px solid #e3e3e3;padding: .5em; border-style:solid none;padding:.5em;border-left:1px solid #e3e3e3;border-top-left-radius:.5em;border-bottom-left-radius:.5em;">Bank</td> <td style="color:#333;text-align:right;font-weight:600;border:1px solid #e3e3e3;padding: .5em;border-left:none;border-top-right-radius:.5em;border-bottom-right-radius:.5em;">Rdb Bank</td> </tr> <tr style="width:100%;margin-bottom: 1em;"> <td style="color:grey;border:1px solid #e3e3e3;padding: .5em; border-style:solid none;padding:.5em;border-left:1px solid #e3e3e3;border-top-left-radius:.5em;border-bottom-left-radius:.5em;">Date of time</td> <td style="color:#333;text-align:right;font-weight:600;border:1px solid #e3e3e3;padding: .5em;border-left:none;border-top-right-radius:.5em;border-bottom-right-radius:.5em;">16-Aug-2021 11:50</td> </tr> <tr style="width:100%;margin-bottom: 1em;"> <td style="color:grey;border:1px solid #e3e3e3;padding: .5em; border-style:solid none;padding:.5em;border-left:1px solid #e3e3e3;border-top-left-radius:.5em;border-bottom-left-radius:.5em;">Payment Status</td> <td style="color:#333;text-align:right;font-weight:600;border:1px solid #e3e3e3;padding: .5em;border-left:none;border-top-right-radius:.5em;border-bottom-right-radius:.5em;">Success</td> </tr> <tr style="width:100%;margin-bottom: 1em;"> <td style="color:grey;border:1px solid #e3e3e3;padding: .5em; border-style:solid none;padding:.5em;border-left:1px solid #e3e3e3;border-top-left-radius:.5em;border-bottom-left-radius:.5em;">Reference number</td> <td style="color:#333;text-align:right;font-weight:600;border:1px solid #e3e3e3;padding: .5em;border-left:none;border-top-right-radius:.5em;border-bottom-right-radius:.5em;">32322</td> </tr> <tr style="width:100%;margin-bottom: 1em;"> <td style="color:grey;border:1px solid #e3e3e3;padding: .5em; border-style:solid none;padding:.5em;border-left:1px solid #e3e3e3;border-top-left-radius:.5em;border-bottom-left-radius:.5em;">Remark</td> <td style="color:#333;text-align:right;font-weight:600;border:1px solid #e3e3e3;padding: .5em;border-left:none;border-top-right-radius:.5em;border-bottom-right-radius:.5em;">Monthly bonus</td> </tr> </tbody> </table> <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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.