如何仅使用 CSS 使用弯曲表
[英]How to use curved table only using CSS
问题描述
I need to convert following image into a HTML with pure CSS without using any 3rd part CSS references.
我需要将以下图像转换为具有纯 CSS 的 HTML 而不使用任何第三部分 CSS 参考。 I have tried the following code snippet.我已经尝试了以下代码片段。 It's code fiddle as follows,它的代码小提琴如下，
https://jsfiddle.net/7jdmgfnx/ 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>
But you can see, its output not the same as the following image.但是可以看到，它的 output 和下图不一样。
- How can I set the content to the center of the browser page as the following image.如何将内容设置到浏览器页面的中心，如下图所示。
- How can I use the table as curved rows as the following image.如何将表格用作弯曲行，如下图所示。 (It does not have to be a table. It doesn't matter if it's something else) （它不一定是一张桌子。如果是别的东西也没关系）
please help me to solve this issue.请帮我解决这个问题。
3 个解决方案
解决方案1
2 已采纳 2022-01-23 10:53:19
Maybe like following snippet, with list and flex:可能像下面的代码片段，带有列表和 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>
解决方案2
1 2022-01-23 10:15:40
Solution is using from multiple div and flex instead table:解决方案是使用多个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>
解决方案3
0 2022-01-24 09:20:09
Here with table:这里有表：
<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.
相关问题
如何使用 CSS 制作弯曲的边缘六边形 - How to make a curved edge hexagon by using CSS
如何使用CSS 3保持弯曲的边框 - How to keep curved borders using css 3
如何使用 CSS 获得弯曲的单条纹？ - How to get a curved single stripe using CSS?
使用 HTML 和 CSS 的曲线文本 - Curved Text using HTML & CSS
如何在不使用图像的情况下在CSS中创建曲线 - How do I create curved lines in css without using an image
如何使用 CSS 和 HTML 创建曲面矩形（如图所示）？ - How to create curved-sided rectangles (as in picture) using CSS and HTML?
如何通过css放置弯曲的文本 - how to put curved text by css
如何仅使用CSS在悬停时显示表格？ - How to display table on hover using only css?
需要使用HTML和CSS的曲线垂直线 - Need a curved vertical line using HTML and CSS
如何仅在表格中的某些单元格上使用CSS悬停？ - how do I use the CSS hover on only SOME cells in a table?
相关标签