How can I create html css table like this excel table
Question
Here is the example of an excel table
Here is my table
How can I create like excel table of these 3 rows in "APRIL 2022 PODACI O RADU" in the HTML table
Here is my code right now I use bootstrap 5, I want to change 'Redovan rad', 'Prekovremeni rad' and 'Prekovremeni rad 100%' to be like in excel table image
<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 answers
solution1
0 2022-05-20 12:53:20
Is there any better way for this solution
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I create scrollable HTML table colums with CSS?
How can I create this (table) with CSS
How can I code a table with "individually controlled cells" like in the example picture using HTML & CSS?
How can I create an HTML table with a fixed header that works in mobile phones like IE for windows mobile?
r knit html How can I create a simple frequency table like the ones we see on books?
Can I have one HTML table header be over two table columns? Like merge and center in Excel?
how do i create html table like on the picture
How do i create matrix like table in HTML
How can i create chat like UI in html and css
How can I code CSS to make Table like?
Related Tags