I am trying to fixed header (both on top and on left) and allows other rows to scroll. I had find a lot of scroll able tbody table with fixed thead like here.
Also, when I tried to implement this code, my table is broken may be because of longer width.
However, I could not find scroll able with respect to x axis keekping header fixed at the same time.
I would appreciate any suggestion to deal with this.
My main requirements:
- top header should be fixed when scrolled vertically
- left header should be fixed when scrolled horizontally.
th{
background: #c3c3c3
}
.table-fixed {
width: 100%;
background-color: #f3f3f3;
}
.table-fixed tbody {
height: 200px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td {
float: left;
}
.table-fixed thead tr th {
float: left;
background-color: #f39c12;
border-color: #e67e22;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="tableBox">
<table class="table table-bordered table-fixed text-center header-fixed">
<thead>
<tr class="fixed-row">
<th></th>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
<th>07</th>
<th>08</th>
<th>09</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>32</th>
<th>33</th>
<th>34</th>
<th>35</th>
<th>36</th>
<th>37</th>
<th>38</th>
<th>39</th>
<th>40</th>
<th>41</th>
<th>42</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<th>1</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>2</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>4</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>5</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>6</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>7</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>8</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
</tbody>
</table>
</div>
In case if you prefer to look in codepen: Codepen link
This is what you are looking for: https://www.jqueryscript.net/table/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer.html
$(function(){
$("#headerFixed").tableHeadFixer({"left" : 1});
})
th{
background: #c3c3c3
}
#tableBox {
max-height: 150px;
}
#headerFixed {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/tableHeadFixer.js"></script>
<div class="tableBox">
<table id="headerFixed" class="table table-bordered table-fixed text-center header-fixed">
<thead>
<tr class="fixed-row">
<th></th>
<th>01</th>
<th>02</th>
<th>03</th>
<th>04</th>
<th>05</th>
<th>06</th>
<th>07</th>
<th>08</th>
<th>09</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>32</th>
<th>33</th>
<th>34</th>
<th>35</th>
<th>36</th>
<th>37</th>
<th>38</th>
<th>39</th>
<th>40</th>
<th>41</th>
<th>42</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<th>1</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>2</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>4</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>5</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>6</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>7</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
<tr>
<th>8</th>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
95
</td>
<td>
</td>
<td>
85
</td>
<td>
333
</td>
<td>
530
</td>
<td>
<span>-603</span>
</td>
<td>
440
</td>
<td>
<span>-570</span>
</td>
<td>
430
</td>
<td>
<span>-603</span>
</td>
<td>
255
</td>
<td>
<span>-595</span>
</td>
<td>
605
</td>
<td>
<span>-603</span>
</td>
<td>
245
</td>
<td>
<span>-595</span>
</td>
<td>
305
</td>
<td>
<span>-115</span>
</td>
<td>
430
</td>
<td> 45 </td>
<td>
</td>
<td>
395
</td>
<td>
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
220
</td>
<td>
255
</td>
<td>
270
</td>
<td>
1051
</td>
<td>
220
</td>
<td>
312
</td>
<td>
45
</td>
<td>
180
</td>
<td>
45
</td>
<td>
978
</td>
<td>
<span>-99</span>
</td>
</tr>
</tbody>
</table>
</div>
Related
This question already has answers here:
How do you use colspan and rowspan in HTML tables?
(11 answers)
Closed 2 years ago.
I need to create a document with the table below, it can be either in HTML or in MARKDOWN, but I simply cannot do it. The difficult is in splitting the LATAM and ITPT into multiple rows. Can someone help please?
You can make this using colspan and rowspan on html based on table.
<table border="1" width="100%">
<tr>
<td colspan="2">HCM</td>
<td>C88</td>
<td>C7Z</td>
<td>C6Z</td>
<td>CHR</td>
<td>CHR</td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5" style="writing-mode: vertical-rl; text-orientation: upright;">LATAM</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
td {
border: 2px solid black;
text-align: center
}
table {
border-collapse: collapse;
}
.break {
word-break: break-all;
width: 1em;
letter-spacing: 1em;
}
<table>
<tr>
<td colspan=2>HCM</td>
<td>C88</td>
<td>C7Z</td>
<td>C7H</td>
<td>C6Z</td>
<td>CHR</td>
</tr>
<tr>
<td colspan=2>BR</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan=5 class="break">LATAM</td>
<td>AR</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CL</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CO</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>MX</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>VE</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>ES</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>NA</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan=2 class="break">ITPT</td>
<td>IT</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>PT</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr></tr>
</table>
Relatively painstaking, but it works
Using colspan and rowspan you can manipulate how each td is displayed, for example to output the structure you have shown in your design containing LATAM, you are required to use rowspan=5. This will indicate that the said td element will 'stretch', for want of a better word, over 5 rows.
Note I understand you have asked for this to be done in HTML only, the height and border are for better visualization.
td {
border: 1px solid black;
height: 32px;
}
<table>
<tr>
<td colspan=2>
HCM
</td>
<td>
C88
</td>
<td>
C7Z
</td>
<td>
C7H
</td>
<td>
C6Z
</td>
<td>
CHR
</td>
</tr>
<tr>
<td colspan=2>
BR
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td rowspan=5 style=>
L<br>A<br>T<br>A<br>M
</td>
<td>
AR
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
CL
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
CO
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
MX
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
VE
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan=2>
ES
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan=2>
NA
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td rowspan=5 style=>
I<br>T<br>P<br>T
</td>
<td>
IT
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
PT
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I need to build a complex table in HTML for schedule web-application.
It should looks like so:
http://s7.postimg.org/f3m25bnuj/schedule_layout.jpg
How can I achieve this in HTML?
Which approach is best to build such a table?
Is "Bootstrap" CSS framework capable to do that too?
My table will have more than 12 columns
That is a pretty complex table. I would recommend that you use some visual tools (like Dreamweaver) to draw this table. Trying such complex table by code is possible but its very time consuming and could result in errors that might have to re-check and redo. Bootstrap has style definitions that you can apply to a table, but trying this particular table via bootstrap css is possible but time consuming. check this jsfiddle: https://jsfiddle.net/brijeshb/zn9eo7uu/
<table width="80%" border="1" cellspacing="1" cellpadding="2">
<tr>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="14%"> </td>
<td width="5%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="9%"> </td>
</tr>
<tr>
<td rowspan="21"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="10"> </td>
<td> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
what have you tried so far? tables would not be recommended for layout purposes and it really depends on a few things for example, does you app need to be responsive? what data would each "box" display? pictures?.
If I were you I would try to use some grid system to start with but the table approach would be too messy and not suitable for creating a layout of that kind.
Yes, you can achieve this in HTML by using colspan and rowspan attributes.
You should use table element only.
"Bootstrap" framework should be used in order to achieve the responsive design.
In smaller screens like ipad, mobile devices, use the following library to avoid distortion.
http://fooplugins.com/plugins/footable-jquery/
Table with spaces that I'm trying to get in the middle
How do I get blank spaces in my table? I want to get it to look like the image above, but I want those empty spaces to be in the middle of the table rather than on the side.
<table style="width:100%" border="1" cellpadding="10">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td> <!-- Added to show the kind of space I want in the table -->
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I'm not sure what I'm doing wrong here. I've looked up several different things but none of them seem to tell me exactly what I'm supposed to do.
I'd try to approach this using CSS instead of a border attribute on the parent table. As is, you're setting a border on every cell in the table, and you want to pick whether or not you're going to show a border on a per-cell basis.
Basically, I'd:
<style type="text/css">
.borderedTable tr td {
border: solid 1px black;
}
.tableCellWithoutBorder {
border-width: 0px;
}
</style>
<table cellpadding="10" class="borderedTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
</table>
I was try to make a printable report...
The report form was i made is messed up at the second page...
So i think i should try a simple experience..
I made a jsFiddle and result same mess thing.
I have a fixed element ( for logo , slogan , ect ) and a dynamic table . i give the distance it with <body style="padding-top: 25mm;"> but only the first page that work , another page is not working ( the fixed element and dynamic table doesn't have distance ).
I have try #page{ padding: 50mm 0mm 50mm 0mm;} but padding didn't work. margin is work but that make the fixed element is croped ! ( when i used style="margin-top:-50mm; )
Page 1 :
Page 2 :
as you see <body style="padding-top: 25mm;"> only work for page 1.
how to give padding on page 2 ?
thanks
just include a background color to your first table to get this fixed!!
HTML
<table style="border: none;position: fixed;top: 0;margin-top: 0px; background:#ffffff;z-index:1;">
<tr>
<td style="background-color: black;color: white;width: 64px;text-align: center;">
LOGO
</td>
<td>
abcdefghj
<br/> bnbkas jbkasb jkbsa jbkjas bkjsbk
<br/> csfajkfsaj 4812-4124-4124
<br/> dfsafsfsaf sagasg#asgasgsag.rsaf
</td>
</tr>
</table>
<table style="width: 100%; margin-top:50px; position:absolute; top:50px;">
<tr>
<td> no </td>
<td> nama </td>
</tr>
<tr>
<td> 1 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 2 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 3 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 4 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 5 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 6 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 7 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 8 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 9 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 10 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 11 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 12 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 13 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 14 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 7 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 8 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 9 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 10 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 11 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 12 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 13 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 14 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 12 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 13 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 14 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 7 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 8 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 9 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 10 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 11 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 12 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 13 </td>
<td> nama tes </td>
</tr>
<tr>
<td> 14 </td>
<td> nama tes </td>
</tr>
</table>
Fiddle Demo
I'm trying to set table height to 100% and have scrollable tbody. Why does my html element grow outside browser window? How can I get scrollbar for tbody instead of html element? I've checked&tried all solutions I could find but none seem to work with my table.
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Table with autoscroll and fixed headers
</title><link rel="stylesheet" type="text/css" href="autoscroll.css" />
<script>
function scrollElementById(elementId) {
document.getElementById(elementId).scrollTop = document.getElementById(elementId).scrollTop + 1;
scrolldelay = setTimeout('scrollElementById(\'' + elementId + '\')', 100); // scrolls every 100 milliseconds
}
</script>
</head>
<body onload="scrollElementById('tableData')">
<table>
<thead>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</thead>
<tbody id="tableData">
<tr>
<td> a </td>
<td> b 9.2 </td>
</tr>
<tr>
<td> 899 </td>
<td> c </td>
</tr>
<tr>
<td> 607 </td>
<td> c </td>
</tr>
<tr>
<td> 606 </td>
<td> c </td>
</tr>
<tr>
<td> 605 </td>
<td> b 2.1 </td>
</tr>
<tr>
<td> 604 </td>
<td> b 3.5 </td>
</tr>
<tr>
<td> 315 </td>
<td> c </td>
</tr>
<tr>
<td> 313 </td>
<td> c </td>
</tr>
<tr>
<td> 160 </td>
<td> d </td>
</tr>
<tr>
<td> 159 </td>
<td> d </td>
</tr>
<tr>
<td> 159 </td>
<td> d </td>
</tr>
<tr>
<td> 157 </td>
<td> d </td>
</tr>
<tr>
<td> 156 </td>
<td> d </td>
</tr>
<tr>
<td> 155 </td>
<td> d </td>
</tr>
<tr>
<td> 154 </td>
<td> d </td>
</tr>
<tr>
<td> 150 </td>
<td> d </td>
</tr>
<tr>
<td> 143 </td>
<td> d </td>
</tr>
<tr>
<td> 142 </td>
<td> d </td>
</tr>
<tr>
<td> 140 </td>
<td> c </td>
</tr>
<tr>
<td> 139 </td>
<td> d </td>
</tr>
<tr>
<td> 139 </td>
<td> d </td>
</tr>
<tr>
<td> 135 </td>
<td> d </td>
</tr>
<tr>
<td> 134 </td>
<td> d </td>
</tr>
<tr>
<td> 125 </td>
<td> d </td>
</tr>
<tr>
<td> 122 </td>
<td> d </td>
</tr>
<tr>
<td> 183 </td>
<td> b 0.1 </td>
</tr>
<tr>
<td> 179 </td>
<td> d </td>
</tr>
<tr>
<td> 177 </td>
<td> d </td>
</tr>
<tr>
<td> 174 </td>
<td> d </td>
</tr>
<tr>
<td> 172 </td>
<td> b 2.0 </td>
</tr>
<tr>
<td> 172 </td>
<td> c </td>
</tr>
<tr>
<td> 165 </td>
<td> d </td>
</tr>
<tr>
<td> 119 </td>
<td> c </td>
</tr>
<tr>
<td> 103 </td>
<td> c </td>
</tr>
<tr>
<td> 102 </td>
<td> c </td>
</tr>
<tr>
<td> 102 </td>
<td> c </td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%
}
tr {
height: 2em;
}
table {
background-color: red;
}
html {
background-color: blue;
}
UPDATED
Adding the following CSS rules will lead to the desired effect in Chrome, Opera and Safari, but not on Internet Explorer and Firefox. You need to use extra workaround (e.g. fixing the height of the table dynamically using JavaScript) to handle these browsers:
table {
background-color: red;
height: 100%;
}
table thead {
display: inline-block;
width: 100%;
height: 20px;
}
table tbody {
height: 100%;
display: inline-block;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}