如何創建像這個 excel 表這樣的 html css 表
[英]How can I create html css table like this excel table
問題描述
這是一個excel表格的例子
這是我的桌子
如何在 HTML 表的“APRIL 2022 PODACI O RADU”中創建像這 3 行的 excel 表
這是我現在使用 bootstrap 5 的代碼，我想將 'Redovan rad'、'Prekovremeni rad' 和 'Prekovremeni rad 100%' 更改為類似於 excel 表格圖像
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>Broj kartice</th> <th>Ime i Prezime</th> <th>Za Mesec</th> <th>Redovan rad</th> <th>Prekovremeni rad 50%</th> <th>Prekovremeni rad 100%</th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> <th>16</th> <th>17</th> <th>18</th> <th>19</th> <th>20</th> <th>21</th> <th>22</th> <th>23</th> <th>24</th> <th>25</th> <th>26</th> <th>27</th> <th>28</th> <th>29</th> <th>30</th> <th>31</th> <th>Redovan rad ukupno sati</th> <th>Prekovremeni rad 50% ukupno sati</th> <th>Prekovremeni rad 100% ukupno sati</th> </tr> </thead> <tbody> <tr> <td>213445</td> <td>Marko Markovic</td> <td>April</td> </tr> </tbody> </table> </div>
1 個解決方案
解決方案1
0 2022-05-20 12:53:20
這個解決方案有沒有更好的方法
<!DOCTYPE html> <html lang="en"> <head> <title>Generate CSV For Your Work</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"> <style> th { text-align:center; } tbody td { text-align: center; vertical-align: middle; white-space: nowrap; } td span { display:block; padding:3px; margin: 3px 0 } td .hour_style { width:30px; height:30px; border: 1px solid black; } thead tr { line-height:15px; } thead th { white-space: nowrap; } .topics th { line-height: 14px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-lg-12 my-5"> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>Broj kartice</th> <th>Ime i Prezime</th> <th>Za Mesec</th> <th></th> <th></th> <th></th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> <th>16</th> <th>17</th> <th>18</th> <th>19</th> <th>20</th> <th>21</th> <th>22</th> <th>23</th> <th>24</th> <th>25</th> <th>26</th> <th>27</th> <th>28</th> <th>29</th> <th>30</th> <th>31</th> <th>Redovan rad ukupno sati</th> <th>Prekovremeni rad 50% ukupno sati</th> <th>Prekovremeni rad 100% ukupno sati</th> </tr> </thead> <tbody> <tr> <td>213445</td> <td>Marko Markovic</td> <td>April</td> <td colspan="3"> <span>Redovan Rad</span> <span>Prekovremeni + 50%</span> <span>Prekovremeni + 100% </span> </td> <td> <span class="hour_style">5</span> <span class="hour_style">2</span> <span class="hour_style">3</span> </td> </tr> </tbody> </table> </div> </div> </div> </div> </body> </html>
如何使用 HTML 和 CSS 對示例圖片中的“單獨控制的單元格”進行編碼？
[英]How can I code a table with "individually controlled cells" like in the example picture using HTML & CSS?
如何創建帶有固定標頭的HTML表，該標頭可在適用於Windows Mobile的IE等手機中使用？
[英]How can I create an HTML table with a fixed header that works in mobile phones like IE for windows mobile?
r knit html如何創建一個簡單的頻率表，就像我們在書上看到的那樣？
[英]r knit html How can I create a simple frequency table like the ones we see on books?
我可以將一個HTML表頭放在兩個表列上嗎？ 喜歡Excel中的合並和中心？
[英]Can I have one HTML table header be over two table columns? Like merge and center in Excel?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.