Why are table lines not displaying in Edge? - html

Question

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

Answer 1

You can use CSS
table {border-collapse: collapse;}
.table2 td {border: 1px solid black;}
See codepen: https://codepen.io/anon/pen/VGRgyJ