Panel scroll bar not working in HTML - html

I am using Bootstrap HTML 5 and I have a panel inside which a table is present. I have enabled scroll for the panel but the table is not adjusting with the panel and the scroll bar is visible but inactive. I want the table inside the panel and each head content should be present within the cell (no overlapping) and the scroll bar needs to be active when content is spacious and effective.
The HTML is as,
<div class="panel-body panel-scroll">
<table class="table table-bordered" id="tableMyCert">
<thead style="background-color:lightblue">
<tr>
<th class="col-sm-4">head 1</th>
<th class="col-sm-3">head 2</th>
<th class="col-sm-3">head 3</th>
<th class="col-sm-3">head 4</th>
<th class="col-sm-3">head 5</th>
<th class="col-sm-5">head 6</th>
<th class="col-sm-2">head 7</th>
<th class="col-sm-5">head 8</th>
<th class="col-sm-4">head 9</th>
<th class="col-sm-2">head 10</th>
<th class="col-sm-5">head 11</th>
<th class="col-sm-4">head 12</th>
<th class="col-sm-2">head 13</th>
<th class="col-sm-5">head 14</th>
<th class="col-sm-4">head 15</th>
<th class="col-sm-2">head 16</th>
<th class="col-sm-5">head 17</th>
<th class="col-sm-5">head 18</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
and the CSS is as,
.panel-scroll{
overflow-x:scroll;
width:100%;
}


make structre like this
<div class="table-responsive">
<table class="table table-bordered" id="tableMyCert">
//rest of your code
</table>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-bordered" id="tableMyCert">
<thead style="background-color:lightblue">
<tr>
<th class="col-sm-4">head 1</th>
<th class="col-sm-3">head 2</th>
<th class="col-sm-3">head 3</th>
<th class="col-sm-3">head 4</th>
<th class="col-sm-3">head 5</th>
<th class="col-sm-5">head 6</th>
<th class="col-sm-2">head 7</th>
<th class="col-sm-5">head 8</th>
<th class="col-sm-4">head 9</th>
<th class="col-sm-2">head 10</th>
<th class="col-sm-5">head 11</th>
<th class="col-sm-4">head 12</th>
<th class="col-sm-2">head 13</th>
<th class="col-sm-5">head 14</th>
<th class="col-sm-4">head 15</th>
<th class="col-sm-2">head 16</th>
<th class="col-sm-5">head 17</th>
<th class="col-sm-5">head 18</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

Related

How to use col and rowspan at the same time?

I'm trying to replicate this table:
I have trouble with the third table head, I don't know how to make that double row and those 5 columns and how to do the table rows and table data to make it fit the head.
I never used colgroup and rowspan before, I tried to mix some examples I've found but i'm not having success.
This is what I have so far:
<table border="1">
<caption>
Poster availability
</caption>
<col>
<colgroup span="5"></colgroup>
<col>
<thead>
<tr>
<th scope="col">Poster name</th>
<td rowspan="2"></td>
<th scope="colrow" colspan="5">Color</th>
<th scope="col">Sizes available</th>
</tr>
<tr>
<th>1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th>7</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
</tr>
</tbody>

This is the way I solved it, just in case other newbie like me has the same problem
<table border="1">
<col>
<col>
<colgroup span="5"></colgroup>
<col>
<tr>
<td rowspan="2">EVIDENCIA DE APRENDIZAJE</td>
<th rowspan="2">%</th>
<th colspan="5" scope="colgroup">INDICADOR DE ALCANCE</th>
<th rowspan="2">INSTRUMENTOS DE EVALUACIÓN</th>
</tr>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
<tr>
<td>EVIDENCIA 1</td>
<td>50%</td>
<td>A1</td>
<td>B2</tds>
<td>C3</td>
<td>D4</td>
<TD>E1</TD>
<td>Instrumento 1</td>
</tr>
</table>

Print HTML Table with Multiple Table Header

Please help me, on How to Print HTML Table with Multiple Table Header?
Sample code of my table header below:
<table>
<thead>
<tr>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is what i want to see in printable page for the Table Header:

<table border="2" >
<thead>
<tr>
<th colspan="2"></th>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="6">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>

See below code..
<table border="2" >
<thead>
<tr>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="4">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
here is working example :: https://jsfiddle.net/deepakvaishnav/0L48mvcz/

Make table column fixed when device small in Bootstrap 4

I'm using Bootstrap 4 Table to make a table.
<div class="col-12">
<table class="table">
<thead>
<tr id="mes">
<th scope="col">column 1</th>
<th scope="col">column 2</th>
<th scope="col">column 3</th>
<th scope="col">column 4</th>
<th scope="col">column 5</th>
<th scope="col">column 6</th>
<th scope="col">column 7</th>
<th scope="col">column 8</th>
<th scope="col">column 9</th>
<th scope="col">column 10</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="">Name 1</th>
<td class="table-success">OKAY</td>
<td class="table-success">OKAY</td>
<td class="table-success">OKAY</td>
<td class="table-success">OKAY</td>
<td class="table-success">OKAY</td>
<td class="table-success">OKAY</td>
</tr>
<tr>
<th scope="row">Name 2</th>
</tr>
<tr>
<th scope="row">Name 3</th>
</tr>
<tr>
<th scope="row">Name 4</th>
<td class="table-success">OKAY</td>
<td class="table-success">OKAY</td>
<td class="table-success">OKAY</td>
</tr>
</tbody>
</table>
</div>
I'm trying to make the first column be fixed when the screen is small (like smartphones). If the user scroll down/up, the first column will scroll too. But if the user scroll left/right, the firts column will be fixed, and the rest will scroll. Anyone can help me ?
I tried to explain in the best way, I hope you understood
Sorry my bad english

how to fixed column with merge column header

how to fixed column no, area, category, sub category, and other column scroll left to right ?
<table class="table table-bordered table-sm">
<thead style="background:red;color:white">
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Area</th>
<th rowspan="2">Category</th>
<th rowspan="2">Sub Category</th>
<th rowspan="2">Risiko</th>
<th rowspan="2">Cause</th>
<th rowspan="2">Impact</th>
<th rowspan="1" colspan="6">Analisis</th>
<th rowspan="1" colspan="4">Evaluasi</th>
<th rowspan="1" colspan="2">Risk Treatment Options</th>
<th rowspan="2">Accountabel Unit</th>
<th rowspan="2">Sumber Daya</th>
<th rowspan="2">Deadline</th>
</tr>
<tr>
<th colspan="2">Probabilitas</th>
<th colspan="2">Impact</th>
<th colspan="2">Risk Level</th>
<th>PIC</th>
<th>Urgency</th>
<th>Existing Control</th>
<th>Risk Control<br>Assessment</th>
<th>Proaktif</th>
<th>Reaktif</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JsFiddle Link: http://jsfiddle.net/5p77f171/

How can I use a list to create a table in html?

I am writing a django app with bootstrap and I have a table with a head in one of my pages like the one below:
<table class="table table-striped table-sm table-bordered table-fixed table">
<thead class="thead-inverse table_head">
<tr class="table_head_row">
<th class="table_head_item">header 1</th>
<th class="table_head_item">header 2</th>
<th class="table_head_item">header 3</th>
<th class="table_head_item">header 4</th>
<th class="table_head_item">header 5</th>
<th class="table_head_item">header 6</th>
<th class="table_head_item">header 7</th>
<th class="table_head_item">header 8</th>
<th class="table_head_item">header 9</th>
<th class="table_head_item">header 10</th>
</tr>
</thead>
</table>
In the above example each header has its own line of code, 10 headers, 10 lines. There is a lot of repetition. I am looking for a way using HTML and not django, to not type almost the same line of code every time.
Using django I could pass the list with the headers from the page's view, like so:
<table class="table table-striped table-sm table-bordered table-fixed table">
<thead class="thead-inverse table_head">
<tr class="table_head_row">
{% for header in table_headers %}
<th class="table_head_item">header</th>
{% endfor %}
</tr>
</thead>
</table>
Below is a mock up in HTML of what it could be like:
table_headers = ["header_1", "header_2", ....]
<table class="table table-striped table-sm table-bordered table-fixed table">
<thead class="thead-inverse table_head">
<tr class="table_head_row">
for header in table_headers
<th class="table_head_item">header</th>
</tr>
</thead>
</table>
Can I do something like this just in html and in django ?