Wrapping up a midterm assignment for an HTML course and facing an issue on the final page. The table is overflowing to the right when the browser isn't maximized, and I'm stumped on how to solve it. Any suggestions?
Unfortunately, unable to share a picture due to lack of reputation.
The HTML code:
<div id="rightcolumn">
<h2>Fuel Cells</h2>
<!--3 Column by 3 Row Layout using a Table-->
<table width="100%" border="0" cellpadding="6">
<caption>Fuel Cells as a Source of Green Energy</caption>
<tr>
<td colspan="3">The research and development of fuel cells is extremely important. Fuel cells are an important technology because they use hydrogen to create energy. Hydrogen is the most plentiful element in our universe, quite unlike oil. If the US ran on fuel cells we would finally be independent from oil. Also, hydrogen doesn’t need to be “mined” like oil. If we no longer needed oil we would save o...
</td>
</tr>
<tr>
<td ><img src="FuelCellDiagram.png" width="335" height="232" alt="How Fuel Cells Work" /></td>
<td><img src="FuelCellhome.png" width="345" height="250" alt="Fuel Cell Powering Home" /></td>
<td><img src="FCCar.GIF" width="400" height="347" alt="How Fuel Cells power Cars" /></td>
</tr>
<tr>
<td colspan="3">Fuel cells are important because of their harmless byproducts. Water and heat, the byproducts, aren’t dangerous and could actually be useful. The heat generated by fuel cells could be used to heat homes or water, making fuel cells even more efficient. Fuel cells would allow us to power our cars as well as our homes. This would lead to an end of the use of gasoline or battery powered vehicles. Although cars are becoming more efficien...
</td>
</tr>
</table>
<!--End of Columns/Table-->
</div>
and the CSS that cannot be edited:
#container {
margin: auto;
width:80%;
min-width:700px;
background-color:#93A5C4;
color:#000000;
border: 2px double #000000;
}
#rightcolumn {
margin-left:140px;
background-color:#ffffff;
color:#000000;
padding:10px;
}
td, tr, th {
padding: 10px;
margin-left:auto;
margin-right:auto;
text-align: left;
}
Restricted from altering the rightcolumn CSS due to display requirements across other pages while restricted to a single CSS file for the entire site.