I've got a mouseover and mouseout on my table rows to show links as I hover over. For some reason it when I hover over the rows it shrinks my thead and the links freakout. I cannot figure it out for the life of me. How can I fix this?
Here is the section of my html:
<table class="table" id="sessions">
<thead>
<tr>
<th scope="col">Sessions</th>
<th scope="col" id="trigger">Next Trigger</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of tableTwo" (mouseover)="showLinks=true" (mouseout)="showLinks=false">
<td scope="row">{{row.session}}</td>
<td *ngIf="showLinks" scope="row">
View
Edit
Trigger Now
</td>
<td scope="row" id="trigger">{{row.nextTrigger}} </td>
</tr>
</tbody>
</table>
You have only 2 header columns in thead, but there are actually 3 columns when rows are generated.
Add one more column in head to balance.
<th scope="col">Sessions</th>
<th *ngIf="showLinks"></th>
<th scope="col" id="trigger">Next Trigger</th>
Related
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
#for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">#(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
I want to give to each of my table <th>'s an identifier, so It won't matter the other when I am using the <td> (while I know the identifier), I found this (HTML headers Attribute), which seems like what I need:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone#example.com</td>
</tr>
</table>
But I change the order of the <td>'s like this, first the email and then the name:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td headers="email">someone#example.com</td>
<td headers="name">John Doe</td>
</tr>
</table>
And as you can see the result that I get is the same.
The header attribute has no effect on presentation; it will not swap table cells around. The header attribute simply denotes which <th> cells the <td> cells relate to for the purposes of enhancing screen readers:
This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the <th> element alone or the <th> element with the scope attribute.
Note that each <td> cell can relate to more than one header cell, if the table contains more than one header row. For example:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
In order to swap table cells around, you'd be much better off using either flexbox (making use of flex-direction) or a JavaScript solution.
I currently have a table with multiple rows. I was wondering if there is a way to collapse several rows (i.e. BMW, Toyota, and Honda) under the first row (i.e. cars) with out remove the "colspan" spacing. All the example I have seen seems like you have to lose the formatting of the collapsed rows.
<table class="table table-sm table-hover">
<thead class="thead-inverse">
<thead>
<tr>
<th colspan="6"></th>
<th colspan="3">Current Month</th>
<th colspan="3">Year-to-Date</th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#cars" class="accordion-toggle">
<th colspan="6">Cars</th>
<td colspan="3">456 mi</td>
<td colspan="3">700 mi</td>
</tr>
<tr class="hiddenRow"><div class="accordian-body collapse" id="cars">
<td colspan="1"></td>
<td colspan="5">Toyota</td>
<td colspan="3">534 mi</td>
<td colspan="3">800 mi</td>
</tr>
<tr>
<th colspan="1"></th>
<th colspan="5">Honda</th>
<td colspan="3">600 mi</td>
<td colspan="3">770 mi</td>
</tr>
</div>
</tbody>
</table>
If you use bootstrap you probably already have jQuery loaded, so you could use it to query and hide the rows on click. Like this:
(function() {
$('#carsTable .toggle').on('click', function() {
$('#carsTable .hideableRow').toggleClass('hiddenRow');
});
})()
https://jsfiddle.net/q4w8062y/1/
Another possibility, not sure it would work as you want, is to put the "toggler-row" on another tbody or as <table>'s child, and use the collapse class on <tbody>. Like this:
https://jsfiddle.net/wkmmro89/1/
http://www.w3.org/TR/html-markup/table.html#table
A table on my site has been flagged by an accessibility plugin (aXe). After some tinkering, it ended up saying that I had to fix the following two things:
<th> elements should only be used when there is a single row and
single column of headers
Table has cells whose rowspan attribute is not equal to 1
How can I reasonably build a table with nested levels of information without violating at least one of those?
My table code is:
<table>
<tbody>
<tr>
<th scope="col" rowspan="2">Type Of</th>
<th scope="col" colspan="2">Blue</th>
<th scope="col" colspan="2">Green</th>
</tr>
<tr>
<td scope="col" class="centered">Light Blue</td>
<td scope="col" class="centered">Dark Blue</td>
<td scope="col" class="centered">Light Green</td>
<td scope="col" class="centered">Dark Green</td>
</tr>
<tr>
<th scope="row">Type 1</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
<tr>
<th scope="row">Type 2</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
<tr>
<th scope="row">Type 3</th>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">Y</td>
<td class="centered">N</td>
</tr>
</tbody>
</table>
Accessibility tools are free to invent their own rules, but this tool is wrong saying you should remove table headers th when you use rowspan or colspan. It's totally wrong. Check that you have the last version of this tool : this is an awful advice.
In your case, you can use the following technique to mark column headers:
H43: Using id and headers attributes to associate data cells with header cells in data tables
Your have one problem in your example:
Your headers in your second line are not marked as column headers (th) (and headers attribute should only reference th with id).
You markup should be something like:
<table>
<thead>
<tr>
<th rowspan="2" id="typeof">Type Of</th>
<th colspan="2" id="blue">Blue</th>
<th colspan="2" id="green">Green</th>
</tr>
<tr>
<th id="lightblue">Light</th>
<th id="darkblue">Dark</th>
<th id="lightgreen">Light</th>
<th id="darkgreen">Dark</th>
</tr>
</thead>
<tbody>
<tr>
<th id="type1" headers="typeof">Type 1</th>
<td headers="type1 lightblue" title="Yes">Y</td>
<td headers="type1 darkblue" title="Yes">Y</td>
<td headers="type1 lightgreen" title="Yes">Y</td>
<td headers="type1 darkgreen" title="No">N</td>
</tr>
<tr>
<th id="type2" headers="typeof">Type 2</th>
<td headers="type2 lightblue" title="Yes">Y</td>
<td headers="type2 darkblue" title="Yes">Y</td>
<td headers="type2 lightgreen" title="Yes">Y</td>
<td headers="type2 darkgreen" title="No">N</td>
</tr>
<tr>
<th id="type3" headers="typeof">Type 3</th>
<td headers="type3 lightblue" title="Yes">Y</td>
<td headers="type3 darkblue" title="Yes">Y</td>
<td headers="type3 lightgreen" title="Yes">Y</td>
<td headers="type3 darkgreen" title="No">N</td>
</tr>
</tbody>
</table>
Also, I added a title attribute in order to add a speakable alternative for screen readers (you could have used aria-label but title adds a tooltip for other people, except it is not keyboard friendly). Better choice would be to have here a full word.
I'm not sure what tool you are using, but have you tried using col and colgroup elements? There is some basic information here from W3C about irregular headers in data tables.
Also, I put together a quick JSFiddle based on your table if you want to look at that: https://jsfiddle.net/dngvc84o/
Hi in the below code I am getting this Consultation Charges: but after this heading it showing this symbol.I want to remove that how to do can any one help me form this issue
Expected output:
Main heading
subheading| ->how to remove this |
updated html
<table width="100%" border="1" style="width:100%;border-collapse: collapse;text-align:center">
<tr>
<th width="12.5%"><b>Bill Particular</b></th>
<th width="12.5%"><b>Bill Sub Particular</b></th>
<th width="12.5%"><b>Doctor</b></th>
<th width="12.5%"><b>Date</b></th>
<th width="12.5%"><b>Dis. Amt.</b></th>
<th width="12.5%"><b>Charge</b></th>
<th width="12.5%"><b>No. of Times</b></th>
<th width="12.5%"><b>Amount</b></th><br>
</tr>
<tr width="100%"><th colspan=2>Consultation Charges:</th><br>
</tr><br>
</table>
You can make use of tag which displays the text like a heading..
Ex:
<html>
<table>
<tr>
<th>Bill Particular</th>
<td>Values</td>
</tr>
</table>
</html>