Here is the table example given below.
From the table, I want third column means third TD from every TR.
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</tbody>
</table>
I tried
<td>(.*?)</td>
this matches every td. Please tell me regex to select every third TD
Are you ONLY looking for regex solution?
I have some solution from CSS and JavaScript. Hopefully it helps you.
From CSS
td:nth-of-type(3) {
color: red;
}
From Javascript
const thirdTD = document.querySelectorAll('td:nth-of-type(3)')
thirdTD.forEach(thirdTdEl => thirdTdEl.style.background = "green")
Related
So I have a weird situation were I have a table footer that I only need to repeat once so I decided to just add the "footer" trs to the end of the tbody so it would only appear once at the end of the table and look like a footer without the repeating on each printed page.
<table>
<tbody>
#foreach(var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</tbody>
</table>
This was fine until Model.Items had enough rows that it pushed the second row of the footer onto the next page when I need to keep the two footer rows together.
I've also tried using the actual tfoot tag like so with a page-break-inside:avoid style.
<table>
<tbody>
#foreach (var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
</tbody>
<tfoot style="page-break-inside:avoid;">
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</tfoot>
</table>
This kept the footer together but its now repeating on each page instead of once. Someone on another Stack Overflow question suggested using the following style on the tfoot to stop it repeating which worked, but now it ignores the page-break-inside:avoid style.
<tfoot style="display: table-row-group"></tfoot>
Does anyone know how to get a footer to appear once and avoid breaking over multiple printed pages?
I got it working but I had to apply a few styles to make it looks like one table. I put the original footer HTML into a tr > td > table like so:
<table>
<tbody>
#foreach (var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
<tr style="page-break-inside:avoid;">
<td colspan="2">
<table>
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
This allowed the footer to stay together while only appearing once at the end of the page.
I want to add two rows inside a td like below picture but I can't find any solution of this.
You can do by using nested table
http://www.corelangs.com/html/tables/table-inside-table.html
You Have Asked (How can i add tr inside td)
To have tr inside td the only way is create another table inside td than you can have tr inside td.
Example :
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>
But the image you have added it represent that you want to merge two rows for that you need to use Row Span.
Example for Row Span ( https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_rowspan )
Try using rowspan attribute in the cell.
https://www.w3schools.com/tags/att_td_rowspan.asp
Maybe you can use the rowspan attribute on td tags in your HTML: https://www.w3schools.com/tags/att_td_rowspan.asp
Example:
<table>
<tr>
<th>B/B LC NO Value USD</th>
<th>ABP Value USD</th>
<th>Exp N& Date</th>
</tr>
<tr>
<td rowspan="2">$ xxxxx<br/>$ -</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>$1</td>
<td>$80</td>
</tr>
</table>
You can give the fiels that you don't want to divide into two rowspan="2" and then skip the fields that would normally be under them.
<table>
<tr>
<td rowspan="2">Margaret Nguyen</td>
<td>427311</td>
<td><time datetime="2010-06-03">June 3, 2010</time></td>
<td>0.00</td>
</tr>
<tr>
<td>533175</td>
<td><time datetime="2011-01013">January 13, 2011</time></td>
<td>37.00</td>
</tr>
</table>
I want display cricket team details. First row of a table is the captains, so for every first row color, I want to make the font size to be green and bold
This is My HTML:
<div >
<table id="sports" border=1 align=center >
<thead >
<tr>
<th>Team1</th>
<th>Team2</th>
</tr>
</thead>
<tbody *ngFor="let T of Teams" >
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
</table>
</div>
This is my model, where I have taken static data:
export const Players=[
{Indian_players:'Kohili(c)',Australia_players:'David Warner(c)',Pakistan_players:'shaheen Afridi(c)',Southafrica_players:'dale steyn(c)',England_players:'Harry Kane(c)'},
{Indian_players:' Dhoni',Australia_players:'Steve Smith',Pakistan_players:'sarfraz Ahmed',Southafrica_players:'du plessis',England_players:'Joe Root'},
{Indian_players:'Rohit Sharma',Australia_players:'Glen Maxwell',Pakistan_players:'Babar Azam',Southafrica_players:'Imran Tahir',England_players:'Alex Hales'},
{Indian_players:'Jadeja',Australia_players:'Aron Finch',Pakistan_players:'Mohamad Hafeez',Southafrica_players:'David Miller',England_players:'James Anderson'},
{Indian_players:'K.L.Rahul',Australia_players:'Mitchel Starc',Pakistan_players:'Imad Wasim',Southafrica_players:'Jp duminy',England_players:'Moeen Ali'},
{Indian_players:'Bhuvaneswar Kumar',Australia_players:'Travis Head',Pakistan_players:'Shadab khan',Southafrica_players:'de kock',England_players:'Jos Buttler'},
{Indian_players:'Shikar Dhawan',Australia_players:'Pat cummins',Pakistan_players:'yasir shah',Southafrica_players:'Hashim Amla',England_players:'Ben Strokes'},
{Indian_players:'RishabPanth',Australia_players:'Mitchel Marsh',Pakistan_players:'Imam-ul-haq',Southafrica_players:'chris morris',England_players:'Sam Billings'},
{Indian_players:'Ashwin',Australia_players:'Peter siddle',Pakistan_players:'Faheem Ashraf',Southafrica_players:'Aiden markram',England_players:'Eoin Morgan'},
{Indian_players:'Dinesh Karthik',Australia_players:'Tim Paine',Pakistan_players:'Shoib Malik',Southafrica_players:'Dean Elgar',England_players:'chris Woakes'},
You can do the following.
<tbody>
<tr *ngFor="let T of Teams; let i = index" [class.your-captain-css-class]="index===0">
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
I've done the following.
getting the index along with object.
Adding class if index is 0.
This is cover your requirement. There is another way of doing it only by CSS.
You can do it with CSS by doing this
custom-class:first-child {
color: yellow;
font-size: 15px;
}
Also, you have an error in your sample an ending tr tag but no beginning tr tag inside the body
<tbody *ngFor="let T of Teams" >
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
I believe after reading the comments you could/should do this instead and use the CSS at the top and it should all work the reason I suggest using the class instead of tr is because if you are using tr you have used tr more then once and it will affect all tr tags instead of just the one you want in the body.
<tbody>
<tr *ngFor="let T of Teams" class="custom-class">
<td> {{T.Indian_players}}</td>
<td>{{T.Australia_players}}</td>
</tr>
</tbody>
I have a question.
I'm doing a DataTable and I want to style it with Bootstrap grid system for make it responsive.
So, my Table has more than 12 cols and when I try to use the grid system, some info does backspace or dates goes truncated:
14-06-
2017
My table is something like this:
<table>
<thead>
<tr>
<th>ID</th>
<th>Descripción</th>
<th>Responsable</th>
<th>Estado</th>
<th style="display:none">Pos.</th>
<th >Inicio</th>
<th>Finalización</th>
<th style="display:none">F. estim.</th>
<th>Tiempo</th>
<th >Puesto de Trabajo</th>
<th>Responsable proceso</th>
<th>Nº Oportunidad</th>
<th>Archivo</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td hidden>...</td>
<td>...</td>
<td>...</td>
<td hidden>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
First of all, it doesn't work well if I put class="col-*-*" (where -- are device and size) on <th> doesn't work, and if I put in <td> doesn't fit.
Also, headers lose alignment because of the sort arrows. Any help will be appreciated. Thank you.
You need css's white-space property:
https://www.w3schools.com/cssref/pr_text_white-space.asp
t.e. 6th td on each row should be:
<td style="white-space: nowrap;">...</td>
If you are using bootstrap, then it could be better to use class text-nowrap:
https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
t.e. 6t td on each row should be:
<td class="text-nowrap">...</td>
But after you are using bootstarp with DataTable i recommend to use DataTable's property columnDefs:
https://datatables.net/reference/option/columnDefs
t.e.:
$('#example').dataTable( {
"columnDefs": [ {
"targets": 6,
"className": "text-nowrap"
} ]
} );
I want to validate my page but w3c keeps giving me this warning. I want to get rid of it but I can't seem to find the cause of it.
It gives me this error:
A table row was 2 columns wide and exceeded the column count established by the first row (1).
Table and CSS code:
<table>
<tr>
<td>Contact informatie</td>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
<tr>
<td>Email:</td>
<td>info#blabla.nl</td>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
table {
border:none;
padding-left:75px;}
td:first-child {
width:135px;
border:none;
text-align:left;}
td+td {
border:none;
text-align: left;}
Anyone any suggestions?
It means exactly what it says. One of the rows in your table has too many columns. Specifically, the first row has less columns that a subsequent row. But we can't do much unless you post some code.
Edit
The markup for the table is incorrect.
You only have one cell in the first row (or do what PeeHaa suggested)
You need to close off each row with </tr>
Just change this:
<tr>
<td>Contact informatie</td>
</tr>
To this:
<tr>
<td colspan="2">Contact informatie</td>
</tr>
YOu should always close you tablerows (tr): </tr>.
Final version:
<table>
<tr>
<td colspan="2">Contact informatie</td>
</tr>
<tr>
<td>Adres:</td>
<td>Jan van der Heydenstraat 61</td>
</tr>
<tr>
<td>Postcode:</td>
<td>1223 BG</td>
</tr>
<tr>
<td>Plaats:</td>
<td>Hilversum</td>
</tr>
<tr>
<td>Email:</td>
<td>info#vazcreations.nl</td>
</tr>
<tr>
<td>Telefoon:</td>
<td>06-31903706</td>
</tr>
</table>
In extension to what SimpleCoder said, if you have the first row of a table have only one column, then the futher ones can have no more then one column. If you want to get around this you need to put a table inside the cell i.e.
<td>
<table>
<tr>
<td><!-- Content here --></td>
</tr>
</table>
</td>