Align table head with table content on bootstrap 4 - html

I'd like to know a way to align the table head with the table content
The actual result is the following:
As you can see, those are not aligned.
I need columns to be aligned without having a fixed width.
Title column should take all the remaining width.
Here is my actual code:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="d-flex">
<th scope="col" class="col-auto"><i class="fas fa-folder fa-lg"></i></th>
<th scope="col" class="col">Title</th>
<th scope="col" class="col-auto">Author</th>
<th scope="col" class="col-auto">NB</th>
<th scope="col" class="col-auto">Last activity</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td scope="row"><i class="fas fa-folder fa-lg"></i></td>
<td class="col">flap flap flap</td>
<td>Dushy</td>
<td>14</td>
<td>03:20:32</td>
</tr>
</tbody>
</table>
</div>
Thanks for your help!


It's because you use col-auto class. Replace col-auto class with col class.
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="d-flex">
<th scope="col" class="col-auto"><i class="fas fa-folder fa-lg"></i></th>
<th scope="col" class="col">Title</th>
<th scope="col" class="col">Author</th>
<th scope="col" class="col">NB</th>
<th scope="col" class="col">Last activity</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td scope="col" class="col-auto"><i class="fas fa-folder fa-lg"></i></td>
<td scope="col" class="col">flap flap flap</td>
<td scope="col" class="col">Dushy</td>
<td scope="col" class="col">14</td>
<td scope="col" class="col">03:20:32</td>
</tr>
</tbody>
</table>
</div>

Related

How can I add multiple columns below one column?

I want to extend the "Water Body Classification" column until to the top of the "D" column, can't figure out how to do it...
Here's the table code
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Unit</th>
<th scope="col" width="30px">Water Body Classification</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<th class="text-center" scope="col">AA</th>
<th class="text-center" scope="col">A</th>
<th class="text-center" scope="col">B</th>
<th class="text-center" scope="col">C</th>
<th class="text-center" scope="col">D</th>
</tr>
<tr>
<td>pH (Range)</td>
<td>mg/L</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-9.0</td>
<td class="text-center">6.5-9.0</td>
</tr>
</tbody>
</table>

You can use colspan in your CSS code. Like this:
colspan = "10"
The code below should show the result you want:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Unit</th>
<th scope="col" width="30px" colspan="5">Water Body Classification</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<th class="text-center" scope="col">AA</th>
<th class="text-center" scope="col">A</th>
<th class="text-center" scope="col">B</th>
<th class="text-center" scope="col">C</th>
<th class="text-center" scope="col">D</th>
</tr>
<tr>
<td>pH (Range)</td>
<td>mg/L</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-9.0</td>
<td class="text-center">6.5-9.0</td>
</tr>
</tbody>
</table>

If you want to use the <table> tag. check the colspan and rowspan method
https://www.w3schools.com/html/html_table_colspan_rowspan.asp
And also you can use div as well
<th scope="col" width="30px" colspan='6'>Water Body Classification</th>
Change your th like this

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>

Check if a user has scrolled to the bottom of data table

I have a issue to make a infinity loading with data table. I have check some solution. But only for window, not for data table. Please help me how to check bottom or top if a user has scrolled to the bottom of data table. Tks for your helped!
<div class="card" *ngIf="!idCondition">
<div class="card-body">
<table class="table cus-table">
<thead>
<tr style="color:#4e73df; ">
<th scope="col" >Col A</th>
<th scope="col" >Col B</th>
<th scope="col" >Col C</th>
<th scope="col" >Col D</th>
<th scope="col" >Col E</th>
<th scope="col" >Col F</th>
<th scope="col" >Col G</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let searchResult of searchResults; let i = index" (click)="goToResultDetail(i)">
<td title="{{getSystemStatus(searchResult.systemStatus)}}">{{getSystemStatus(searchResult.systemStatus)}}</td>
<td title="{{searchResult.birthday}}">{{searchResult.birthday}}</td>
<td title="{{getGender(searchResult.gender)}}">{{getGender(searchResult.gender)}}</td>
<td title="{{searchResult.receiptType}}">{{searchResult.receiptType}}</td>
<td title="{{searchResult.receiptManagementNo}}">{{searchResult.receiptManagementNo}}</td>
<td title="{{searchResult.medicalInstitutionName}}">{{searchResult.medicalInstitutionName}}</td>
<td title="{{searchResult.treatmentYearMonth}}">{{searchResult.treatmentYearMonth}}</td>
</tr>
</tbody>
</table>
</div>
</div>

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/

html table header rowspan to center headers

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>