I am trying to create a table that's divided into to sections with 2 headings; one on top and one bottom. The top section will have 3 headings and 3 columns(<td>s). The second will have one long heading, 2 columns, and one long footer. I am having trouble getting the 2 bottom columns to span the length of the table (they are currently aligned with the first 2 columns on the upper section.
I've tried using `colspan="1.5" (my logic is if the colspan="3", then half will work) as well as width="550px;" (the full width of the table is 1000px). Any suggestions here on what I do to achieve this? Code is below (Note: this is a javascript app that uses a DOM Node to dynamically create the table; I'm just using inline css to get it in there right now).
supplemental_dialog.innerHTML = "<h6>Map Date: " + this_date + "</h6>" +
"<div class='row' style='height:100px;'>" +
"<div><h5>Location Information</h5>" +
"<table id='table2' width=100%>" +
"<tr width=100%>" +
"<th><b>Flood Event</b></th>" + "<th><b>Estimated Flood Depth*</b></th>" + "<th><b>Estimated Base Flood Elevation*</b></th>" +
"</tr>" +
"<tr width=100%>" +
"<td width=33%>0.2 Percent (500 Year)</td><td width=33%>" + "14.5 feet above land surface" + "</td>" + "<td width=33%>" + "496.4 feet NAVD 1988" + "</td > " +
"</tr>" +
"<tr width=100%>" +
"<td width=33%>0.2 Percent (500 Year)</td><td width=33%>" + "14.5 feet above land surface" + "</td>" + "<td width=33%>" + "496.4 feet NAVD 1988" + "</td > " +
"</tr>" +
"<tr width=100%>" +
"<td width=33%>0.2 Percent (500 Year)</td><td width=33%>" + "14.5 feet above land surface" + "</td>" + "<td width=33%>" + "496.4 feet NAVD 1988" + "</td > " +
"</tr>" +
"<tr width=100%>" +
"<td width=33%>0.2 Percent (500 Year)</td><td width=33%>" + "14.5 feet above land surface" + "</td>" + "<td width=33%>" + "496.4 feet NAVD 1988" + "</td > " +
"</tr>" +
"<tr width=100%>" +
"<th colspan='3' width=100% style='text-align:center'><b>Probability of Flooding </b></td>" +
"</tr>" +
"<tr width=100%>" +
"<td width='500px'>0.2 Percent (500 Year)</td><td width='500px'>" + "14.5 feet above land surface" + "</td>" +
"</tr>" +
"<tr width=100%>" +
"<td width='500px'>0.2 Percent (500 Year)</td><td width='500px'>" + "14.5 feet above land surface" + "</td>" +
"</tr>" +
"<tr width=100%>" +
"<td colspan='3' width=100%><p style='font-size: 10px;'>*The information included in this report is based on the entire building footprint, or, if clicked outside of a building footprint, based on the point clicked on the map. Results are not considered an official determination.</p></td>" +
"</tr>" +
"</table></div > " +
"</div>";
To be clear; this is my goal:
question from:
https://stackoverflow.com/questions/65902623/irregularly-spaced-columns-in-a-table 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
