CSS Table with Alternating Colour Rows - html

Hello I was wondering if it's possible with a css table to have alternating colour rows? I would like it to look like this,
http://i.imgur.com/zT04atv.jpg
My code so far for the table is this. I have tried but just can't seem to get it to work. Is this possible? And if so how would I implement it? Thanks.
<table style="height: 448px;" width="1007">
<tbody>
<tr>
<td style="text-align: center;">
<p>Pricing</p>
<p>Structure</p>
</td>
<td style="text-align: center;">
<p>Professional</p>
<p>Resume</p>
<p>$199</p>
</td>
<td style="text-align: center;">
<p>Managerial</p>
<p>Resume</p>
<p>$299</p>
</td>
<td style="text-align: center;">
<p>Executive</p>
<p>Resume</p>
<p>$399</p>
</td>
<td style="text-align: center;">
<p>C-Suite</p>
<p>Resume</p>
<p>$499</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Resume Specs</td>
<td style="text-align: center;">2-3 pg resume</td>
<td style="text-align: center;">4-5 pg resume</td>
<td style="text-align: center;">
<p>+ cover sheet and</p>
<p>graphics</p>
</td>
<td style="text-align: center;">+ standalone bio pg</td>
</tr>
<tr>
<td style="text-align: center;">Phone Interview</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">
<p>Tick</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Draft To Approve</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
</tr>
<tr>
<td style="text-align: center;">Template Options</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">Tick</td>
<td style="text-align: center;">Tick</td>
</tr>
<tr>
<td style="text-align: center;">Extras</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;">
<p>+ Free LinkedIn</p>
<p>profile</p>
</td>
<td style="text-align: center;">
<p>+ Free LinkedIn</p>
<p>profile</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Delivery</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
<td style="text-align: center;">
<p>.docx & .pdf</p>
<p>versions</p>
</td>
</tr>
<tr>
<td style="text-align: center;">Cover Letter</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
<td style="text-align: center;">+ $50</td>
</tr>
<tr>
<td style="text-align: center;">
<p>If your not sure where</p>
<p>your job would fit, please</p>
<p>get in touch to discuss </p>
<p>your arrangements</p>
</td>
<td style="text-align: center;">
<p>Vocations (such as</p>
<p>teaching & nursing)</p>
<p>Early career professionals</p>
</td>
<td style="text-align: center;">
<p>Managers and Senior</p>
<p>professionals (lawyers,</p>
<p>medical doctors), BDM's</p>
<p>consultants...</p>
</td>
<td style="text-align: center;">
<p>Senior Managers and Exec</p>
<p>Directors (Operations</p>
<p>Managers, GMs, Head of</p>
<p>Department</p>
</td>
<td style="text-align: center;">
<p>CEOs, CFOs, COOs, CIOs,</p>
<p>Managing Directors, Board</p>
<p>Members & Non-Execs,</p>
<p>Practice Directors & Principals</p>
</td>
</tr>
</tbody>
</table>

You can use the CSS3 that allows to put style to the odd or even elements of a selector.
td:nth-child(odd) {
background: #ff0000;
}
td:nth-child(even) {
background: #0000ff;
}

Related

I have a large table with many colspans and need the column widths to be equal

I cannot get the columns in this data table to be equal width. I'm attaching the HTML file. The goal is to get the GAW 325, GAW 331, GAW 333, GAW 334, GAW 337, and GAW 338 to be equal widths. The rest of the cells can resize as needed, there are no other requirements for them. All CSS needs to be inline as I don't have access to the stylesheet.
I tried using fixed-width layout, manually setting the table and TD and TR tags to various widths using inline HTML, CSS, pixels, and percentages.
<table align="left" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF; " rowspan="2" valign="bottom">
<p>Property</p>
</td>
<td bgcolor="#5e86a0" style="color:#FFFFFF; " colspan="11" >
<p align="center">Material Sets</p>
</td>
</tr>
<tr>
<td>
<p align="center">GAW 325</p>
</td>
<td style="" colspan="3">
<p align="center">GAW 331<sup>a</sup></p>
</td>
<td style="" colspan="2">
<p align="center">GAW 333</p>
</td>
<td style="" colspan="2">
<p align="center">GAW 334<sup>a</sup></p>
</td>
<td style="" colspan="2">
<p align="center">GAW 337<sup>a</sup></p>
</td>
<td style="">
<p align="center">GAW 338</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;" >
<p>IP Rating<sup>b</sup></p>
</td>
<td colspan="11" >
<p align="center">IP67 / IP68</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;">
<p>ISO Rating</p>
</td>
<td colspan="2">
<p align="center">–</p>
</td>
<td colspan="2">
<p align="center">30 m water<br />
# 10 min</p>
</td>
<td colspan="7" >
<p align="center">–</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;" >
<p>Insertion loss # 1kHz<sup>c</sup></p>
</td>
<td colspan="3" style="vertical-align: middle;">
<p align="center">< 2.5 dB</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">< 4 dB</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">< 1.5 dB</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">< 1.8 dB</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">< 1.3 dB</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;" >
<p>Adhesive type</p>
</td>
<td colspan="11" style="vertical-align: middle;">
<p align="center">Acrylic</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;" >
<p>Adhesive temperature resistance</p>
</td>
<td colspan="4" style="vertical-align: middle;">
<p align="center">-40 °C to 100 °C</p>
</td>
<td colspan="4" style="vertical-align: middle;">
<p align="center">-40 °C to 85 °C</p>
</td>
<td colspan="3" style="vertical-align: middle;">
<p align="center">-20 °C to 85 °C</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;" >
<p>Membrane type</p>
</td>
<td colspan="11" style="vertical-align: middle;">
<p align="center">ePTFE</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;" >
<p>Membrane characteristic</p>
</td>
<td colspan="3" style="vertical-align: middle;">
<p align="center">Oleophobic</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">Hydrophobic</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">Oleophobic</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">Hydrophobic</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">Oleophobic</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF; width:16%" >
<p>Membrane color</p>
</td>
<td style="vertical-align: middle; width:16%">
<p align="center">Black</p>
</td>
<td colspan="3" style="vertical-align: middle; width:16%">
<p align="center">Black</p>
</td>
<td colspan="2" style="vertical-align: middle; width:16%">
<p align="center">White</p>
</td>
<td colspan="2" style="vertical-align: middle; width:16%">
<p align="center">Black</p>
</td>
<td colspan="2" style="vertical-align: middle; width:16%">
<p align="center">White</p>
</td>
<td style="vertical-align: middle; width:16%">
<p align="center">Black</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;" >
<p>Support material</p>
</td>
<td colspan="6" style="vertical-align: middle;">
<p align="center">PET-Nonwoven / PET</p>
</td>
<td colspan="5" style="vertical-align: middle;">
<p align="center">PET</p>
</td>
</tr>
<tr>
<td bgcolor="#5e86a0" style="color:#FFFFFF;" >
<p>RoHS <sup>d</sup></p>
</td>
<td colspan="11" >
<p align="center">Meets threshold requirements</p>
</td>
</tr>
</tbody>
</table>
The goal is to get the GAW 325, GAW 331, GAW 333, GAW 334, GAW 337, and GAW 338 to be equal widths.
Add the following to <table style="...">:
table-layout:fixed; width:100vw
To each <td style="...">GAW*</td> add:
width: 14vw;
and colspan="2"
Add an extra colspan to each row.
Optional: Changed key <td> into <th>.
A <table> with table-layout: fixed style allows us to assign a width to each column. This is done be assigning width to the top most applicable <td>/<th>, if it's not exactly the top most cell the <td>/<th> with the largest width in the column will determine column width.
Some Advice:
I'm aware that OP cannot use CSS -- this is for future readers
Use classes to declare style not inline-styles.
👍 <th class='header'></th>
👎 <td style='color:#FFFFFF;'></td>
Deprecated attributes: align, cellpadding, cellspacing, border, valign, and bgcolor should not be used -- there are CSS equivalents available.
<table align="left" border="1" cellpadding="0" cellspacing="0" style='table-layout:fixed;width:100vw'>
<tbody>
<tr>
<th bgcolor="#5e86a0" style="width:14vw;color:#FFFFFF; " rowspan="2" valign="bottom">
<p>Property</p>
</th>
<th bgcolor="#5e86a0" style="color:#FFFFFF; " colspan="12">
<p align="center">Material Sets</p>
</th>
</tr>
<tr>
<th style='width:14vw' colspan="2">
<p align="center">GAW<br>325</p>
</th>
<th style="width:14vw" colspan="2">
<p align="center">GAW<br>331<sup>a</sup></p>
</th>
<th style="width:14ww" colspan="2">
<p align="center">GAW<br>333</p>
</th>
<th style="width:14vw" colspan="2">
<p align="center">GAW<br>334<sup>a</sup></p>
</th>
<th style="width:14vw" colspan="2">
<p align="center">GAW<br>337<sup>a</sup></p>
</th>
<th style="width:14vw" colspan="2">
<p align="center">GAW<br>338</p>
</th>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p>IP Rating<sup>b</sup></p>
</th>
<td colspan="12">
<p align="center">IP67 / IP68</p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p>ISO Rating</p>
</th>
<td colspan="2">
<p align="center">–</p>
</td>
<td colspan="2">
<p align="center">30 m water<br /> # 10 min</p>
</td>
<td colspan="8">
<p align="center">–</p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p>Insertion Loss # 1kHz<sup>c</sup></p>
</th>
<td colspan="4" style="vertical-align: middle;">
<p align="center">< 2.5 dB</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">< 4 dB</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">< 1.5 dB</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">< 1.8 dB</p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center">< 1.3 dB</p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p>Adhesive Type</p>
</th>
<td colspan="12" style="vertical-align: middle;">
<p align="center">Acrylic</p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p><small>Adhesive Temp Resistance</small></p>
</th>
<td colspan="4" style="vertical-align: middle;">
<p align="center">-40 °C to 100 °C</p>
</td>
<td colspan="4" style="vertical-align: middle;">
<p align="center">-40 °C to 85 °C</p>
</td>
<td colspan="4" style="vertical-align: middle;">
<p align="center">-20 °C to 85 °C</p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p><small>Membrane Type</small></p>
</th>
<td colspan="12" style="vertical-align: middle;">
<p align="center">ePTFE</p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p><small>Membrane Characteristic</small></p>
</th>
<td colspan="4" style="vertical-align: middle;">
<p align="center"><small>Oleophobic</small></p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center"><small>Hydrophobic</small></p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center"><small>Oleophobic</small></p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center"><small>Hydrophobic</small></p>
</td>
<td colspan="2" style="vertical-align: middle;">
<p align="center"><small>Oleophobic</small></p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF; width:16%">
<p><small>Membrane Color</small></p>
</th>
<td style="vertical-align: middle; width:16%">
<p align="center"><small>Black</small></p>
</td>
<td colspan="4" style="vertical-align: middle; width:16%">
<p align="center">Black</p>
</td>
<td colspan="2" style="vertical-align: middle; width:16%">
<p align="center">White</p>
</td>
<td colspan="2" style="vertical-align: middle; width:16%">
<p align="center">Black</p>
</td>
<td colspan="2" style="vertical-align: middle; width:16%">
<p align="center">White</p>
</td>
<td style="vertical-align: middle; width:16%">
<p align="center"><small>Black</small></p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p>Support Material</p>
</th>
<td colspan="6" style="vertical-align: middle;">
<p align="center">PET-Nonwoven / PET</p>
</td>
<td colspan="6" style="vertical-align: middle;">
<p align="center">PET</p>
</td>
</tr>
<tr>
<th bgcolor="#5e86a0" style="color:#FFFFFF;">
<p>RoHS <sup>d</sup></p>
</th>
<td colspan="12">
<p align="center">Meets Threshold Requirements</p>
</td>
</tr>
</tbody>
</table>
Here is a somewhat hacky approach using padding in the cells. It ends up wrapping the text, but you can play around with it and hopefully get a decent result.
<tr>
<td>
<p align="center" style="padding-left: 30px; padding-right: 30px;">GAW 325</p>
</td>
<td style="" colspan="3">
<p align="center" style="padding-left: 30px; padding-right: 30px;">GAW 331<sup>a</sup></p>
</td>
<td style="" colspan="2">
<p align="center" style="padding-left: 5px; padding-right: 5px;">GAW 333</p>
</td>
<td style="" colspan="2">
<p align="center" style="padding-left: 30px; padding-right: 30px;">GAW 334<sup>a</sup></p>
</td>
<td style="" colspan="2">
<p align="center" style="padding-left: 10px; padding-right: 10px;">GAW 337<sup>a</sup></p>
</td>
<td style="">
<p align="center" style="padding-left: 40px; padding-right: 40px;">GAW 338</p>
</td>
</tr>
html tables are always hard to get exactly right it seems. I see what you mean; trying to edit the cell widths directly cause abnormal results.
here is a fiddle with my edit:
https://jsfiddle.net/exv05h7u/4/
Again, not the smoothest or most elegant approach, but hopefully it helps :)

Clickable HTML Table in email

I'm trying to create a clickable HTML table that doesn't make the text appear hyperlinked -- and that makes the entire table linked. After spending hours sifting through the previous posts on this topic, I thought I had figured the code out and got it to work in an HTML editor.
However, when I send myself test email samples, the code is not working. In Outlook, the table appears clickable but is not linked. In Gmail, it doesn't appear clickable and is not linked.
A very helpful commenter let me know that I can't have an <a> tag outside the table, but if I move the <a> tag to inside the <td> then it will only link the text, not the whole table.
Is there a workaround for this?
Here is my code:
<a href="http://google.com" style="text-decoration:none">
<table align="center" border="1" cellpadding="10" cellspacing="0" style="width:200px;">
<tbody>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
</tr>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
</tr>
</tbody>
</table>
</a>
Thanks so much in advance
Add a style color: inherit;in your <a> tag. It should looks like this:
<a href="http://google.com" style="text-decoration:none;color:inherit">
<a href="http://google.com" style="text-decoration:none;color:inherit">
<table align="center" border="1" cellpadding="10" cellspacing="0" style="width:200px;">
<tbody>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
<td style="text-align: center;"><strong>TEXT</strong></td>
</tr>
<tr id="clickable" style="cursor:pointer">
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
<td style="text-align: center;">
<strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
</td>
</tr>
</tbody>
</table>
</a>

Why are table lines not displaying in Edge?

enter image description here
Had to remove all our copy in order to post publicly, sorry if it makes it hard to see. The border for the rightmost column "Pro" shows up in Firefor, Chrome, and Safari but not in Edge or IE. Anybody run into this before?
section class="line">
<div class="box margin-bottom">
<div class="margin-top-25">
<h1></h1>
</div>
<div class="line margin-top-25">
<div class="margin">
<div class="s-12">
<center>
<table class="table2" style="">
<tr>
<td width="40%"> </td>
<td width="15%"> </td>
<td width="15%"><span class="button" style="background-color: #d2d2d2; color:#000000"><strong></strong></span></td>
<td width="15%"> </td>
<td width="15%"> </td>
</tr>
<tr>
<td class="td2"> </td>
<td class="td2">
<a href="basic_gif1.html" class="tooltip button" style="color: white; background-color: #58595B">
<span class="tooltiptext">Click here to learn more about the Basic Package</span>
<strong>Basic</strong>
</a>
</td>
<td class="td2">
<a href="plus_gif1.html" class="tooltip button" style="color: white; background-color: #b8282e">
<span class="tooltiptext">Click here to learn more about the Plus Package</span>
<strong>Plus</strong>
</a>
</td>
<td class="td2">
<a href="pro_gif1.html" class="tooltip button" style="color: white; background-color: #dc8419">
<span class="tooltiptext">Click here to learn more about the Pro Package</span>
<strong>Pro</strong>
</a>
</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>•</strong></td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><img src="img/newjersey.png" /></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><img src="img/newjersey.png" /></td>
<td class="td2 tdbl" style="font-size: 24px;">
<img src="img/newjersey.png" />
<p>+</p>
<p style="font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif"><strong>WSJ</strong> or <strong>Forbes</strong></p>
</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl"> </td>
<td class="td2 tdbl">Choose 1</td>
<td class="td2 tdbl">Choose 2</td>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong></strong></td>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #b8282e; font-size: 24px;"><strong>•</strong></td>
<td class="td2 tdbl" style="color: #dc8419; font-size: 24px;"><strong>•</strong></td>
</tr>
</tr>
<tr class="tr2">
<td class="td2" style="text-align: left; font-size: 20px;">
<p></p>
</td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$349</strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$549</strong></td>
<td class="td2 tdbl" style="color: #58595B;"><strong>$979</strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="background-color: #f5f5f5;font-size: 20px;"><strong></strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="text-align: left; font-size: 20px;"><strong></strong></td>
</tr>
<tr>
<td colspan="4" class="td2" style="text-align: left;font-size: 20px;"><strong></strong></td>
</tr>
</table>
</center>
</div>
</div>
</div>
<div class="line margin-top-25" style="background-color: #b8282e;"> </div>
<div class="margin-top-25">
<h1 id="tools"></h1>
<p></p>
</div>
<div class="line margin-top-25">
<div class="margin">
<div class="s-12">
<div class="tabs">
<div class="tab-item tab-active">
<a class="tab-label active-btn" name="" style=" width: 33.33333333%;"></a>
<div class="tab-content">
<div class="box" style="text-align: left">
<center>
<table class="table2" style="width: 60%;">
<tr class="tr2">
<td class="td2"> </td>
<td class="td2" colspan="6"><strong>Quantity</strong></td>
</tr>
<tr class="tr2">
<td class="td2"><strong>Product</strong></td>
<td class="td2"><strong>100</strong></td>
<td class="td2"><strong>250</strong></td>
<td class="td2"><strong>500</strong></td>
<td class="td2"><strong>1,000</strong></td>
<td class="td2"><strong>2,000</strong></td>
<td class="td2"><strong>3,000</strong></td>
</tr>
<tr class="tr2">
<td class="td2"></td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
</tr>
<tr class="tr2">
<td class="td2">Brochures</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
<td class="td2" style="font-size: 12px;">$</td>
</tr>
<tr class="tr2">
<td class="td2"></td>
<td class="td2" style="font-size: 12px;">$200</td>
<td class="td2" style="font-size: 12px;">$245</td>
<td class="td2" style="font-size: 12px;">$325</td>
<td class="td2" style="font-size: 12px;">$525</td>
<td class="td2" style="font-size: 12px;">$825</td>
<td class="td2" style="font-size: 12px;">$925</td>
</tr>
<tr class="tr2">
<td class="td2" colspan="7" style="font-size: 12px;"></td>
</tr>
</table>
For the life of me I can't see what's off here. Admittedly I'm pretty new to HTML, but through checking W3 and other online resources I haven't been able to nail down what would be causing this to render incorrectly in IE/Edge
You can use CSS
table {border-collapse: collapse;}
.table2 td {border: 1px solid black;}
See codepen: https://codepen.io/anon/pen/VGRgyJ

Table doesn't display correctly when narrow (WordPress)

I'm having some grief with tables I'm trying to set up in WordPress. Have a look here - the page looks OK when at a normal desktop width (say 1000px), but when you narrow it down below about 750px, the tables start repeating information for no apparent reason. I've flicked through my CSS and through my tables themselves and can't seem to find any immediate reason why. This is only a problem for when mobile users try to view the page.
One of the tables is as follows.
<table style="height: 25px;" border="1" width="673" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>WEEK</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>PRICE</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>AVAILABLE</strong></em></td>
</tr>
</tbody>
</table>
<table style="height: 120px;" border="1" width="673" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> 3rd Jan to 10th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>Available </strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>10th Jan to 17th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <strong><em>Available </em></strong></strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>17th Jan to 24th Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <strong><em>Available </em></strong></strong></em></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>24th Jan to 31st Jan</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><span style="color: #ff0000;"><em><strong> <span style="color: #000000;"><strong><em>Available </em></strong></span></strong></em></span></td>
</tr>
<tr>
<td style="text-align: center;" valign="bottom" width="206"><b><i>31st Jan to 7th Feb</i></b></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong>£359</strong></em></td>
<td style="text-align: center;" valign="bottom" width="206"><em><strong> <span style="color: #ff0000;"><strong><em>BOOKED</em></strong></span></strong></em></td>
</tr>
</tbody>
</table>
Any ideas why this might be doing this?
It's hard to know for sure without seeing your CSS, but there will be a breakpoint set for 785px that displays elements with class 'pinned', making the duplicate table entries appear.
try:
#media all max-width: 785px {
.pinned {
display:none !important;
}
}

Delphi-search and retrieval value in text

Im downloading page to memo1.text and in this text i need to extract some value's to variables.
necessary part of downloaded code:
<tr>
<td style="text-align: left;">Nazwa1</td>
<td style="text-align: right;"> 88.</td>
<td style="text-align: center;"> 20%</td>
<td style="text-align: right;">86</td>
<td style="text-align: right;">108 h</td>
<td style="text-align: center;"> 1.00000</td>
<td style="text-align: right;">8974296.0</td>
<td style="text-align: center;"> 1.00</td>
</tr>
<tr>
<td style="text-align: left;">Nazwa2</td>
<td style="text-align: right;"> 282</td>
<td style="text-align: center;">---</td>
<td style="text-align: right;">261</td>
<td style="text-align: right;">1:26 h</td>
<td style="text-align: center;"> 0.00212</td>
<td style="text-align: right;"> 312001.9</td>
<td style="text-align: center; color: #00cc00; "> 1.02</td>
</tr>
<tr>
<td style="text-align: left;">Nazwa3</td>
<td style="text-align: right;"> 2747</td>
<td style="text-align: center;">100%</td>
<td style="text-align: right;">1833</td>
<td style="text-align: right;">0:27 h</td>
<td style="text-align: center;"> 0.02239</td>
<td style="text-align: right;"> 364.4</td>
<td style="text-align: center; color: #00cc00; "> 1.19</td>
</tr>
<tr>
<td style="text-align: left;">Nazwa4</td>
<td style="text-align: right;"> 413.6</td>
<td style="text-align: center;">100%</td>
<td style="text-align: right;">281</td>
<td style="text-align: right;">0:6 h</td>
<td style="text-align: center;"> 0.00358</td>
<td style="text-align: right;"> 32812.1</td>
<td style="text-align: center; color: #cc0000; "> 0.78</td>
</tr>
I must extract variable value "1.19" from "Nazwa3" table,
everything in table are variables, only name "nazwa3" is const.
uses
regexpr;
function searchandextract(InputStr : string) : string;
var
R : TRegExpr;
begin
Result := '';
R := TRegExpr.Create;
try
R.Expression := '<td style="text-align: left;">Nazwa3</td>(.+?)"> ([0-9\.]+)</td>(.+?)</tr>';
if R.Exec(InputStr) then
begin
Result := R.Match[2];
end;
finally
R.Free;
end;
end;
Label1.Caption := searchandextract(Memo1.Text);
But result of this function is empty and i dont have any idea why?
Do NOT use regular expression to parse HTML files, rather take a look at an HTML parser library, in delphi you could use DIHtmlParser or htmlp .