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
Related
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>
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/
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>
I have a table like this:
<table border="1">
<thead>
<tr>
<th colspan="2">Items</th>
<th colspan="2">Type</th>
<th colspan="4">Values</th>
<th colspan="2">Date</th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="2"></th>
<th colspan="2">Before</th>
<th colspan="2">After</th>
<th colspan="2"></th>
</tr>
</thead>
<tbody></tbody>
In the header of the table, I would like to have the headers Items, Type and Date to be centered vertically. I tried using rowspan="2" on these headers, but that didn't work. Any idea please?
When using rowspan, you have to not add the columns in the next rows (or as much rows as the rowspan number minus one).
Your demo, updated:
<table border="1">
<thead>
<tr>
<th rowspan="2">Items</th>
<th rowspan="2">Type</th>
<th colspan="4">Values</th>
<th rowspan="2">Date</th>
</tr>
<tr>
<th colspan="2">Before</th>
<th colspan="2">After</th>
</tr>
</thead>
<tbody></tbody>
</table>
Note: If you remove the Before and After colspan, your Values colspan can be just 2.
<table border="1">
<thead>
<tr>
<th colspan="2" rowspan="2">Items</th>
<th colspan="2" rowspan="2">Type</th>
<th colspan="4">Values</th>
<th colspan="2" rowspan="2">Date</th>
</tr>
<tr>
<th colspan="2">Before</th>
<th colspan="2">After</th>
</tr>
</thead>
<tbody></tbody>
<table border="1">
<thead>
<tr>
<th rowspan="2">Items</th>
<th rowspan="2">Type</th>
<th colspan="2">Values</th>
<th rowspan="2">Date</th>
</tr>
<tr>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tbody></tbody>
I want to have one table header be centered over two table columns side by side. Is this possible?
<th colspan="2">. This .</th>
To extrapolate a bit...
<table>
<thead>
<tr>
<th>Single Column</th>
<th colspan="2">Double Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column One</td>
<td>Column Two</td>
<td>Column Three</td>
</tr>
</tbody>
</table>
That should give you enough to work from.
If you only have 2 columns then I would suggest using <caption>. Otherwise, use colspan as suggested in other answers.
<table>
<caption>This will span all columns.</caption>
<tr><td>column one</td><td>column two</td></tr>
</table>
Of course. Please refer to this page. You are looking for attribute called colspan for table headers cells.
We can do it in better way.
<table border="1">
<tr>
<th colspan="1" scope="colgroup">Test Heading</th>
<th colspan="3" scope="colgroup">Mars</th>
<th colspan="3" scope="colgroup">Venus</th>
<th colspan="3" scope="colgroup">Test</th>
</tr>
<tr>
<th rowspan="2"></th>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
<th scope="col">Sold</th>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
<th scope="col">Sold</th>
<th scope="col">Test 1</th>
<th scope="col">Test 2</th>
<th scope="col">Test 3</th>
</tr>
</table>
Please visit Table Ref From w3.org if you want to know more.