简体   繁体   English

HTML页面上的表溢出

[英]Table overflowing on HTML page

I'm finishing up a midterm project for an HTMl course and I'm working on my last page. 我正在完成HTMl课程的期中项目,并且正在最后一页上工作。 Problem is, the table overflows to the right (when the browser isn't maximized) and I can't figure out how to fix it. 问题是,该表向右溢出(当浏览器未最大化时),我不知道如何解决它。 Can anyone help? 有人可以帮忙吗?

I can't post a pic. 我无法发布图片。 (No rep) (无代表)

The HTML: HTML:

<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&rsquo;t need to be  &ldquo;mined&rdquo; like oil. If we no longer needed oil we would save on the price we have  been paying for decades. Hydrogen is both extremely abundant and a renewable  resource. If hydrogen was used as our primary power source we wouldn&rsquo;t ever  need to worry about running out of it, like we do with oil and other fossil  fuels. A cloudy day can stop solar panels from generating much electricity and  a still day can stop wind power. With hydrogen however, weather wouldn&rsquo;t affect  the quantity of power fuel cells produce. This makes fuel cells far more  reliable than other, alternative forms of &ldquo;green&rdquo; energy.
    </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&rsquo;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 efficient, they are unable to match the efficiency of  fuel cells. Our current gas powered vehicles produce harmful pollutants during  fuel combustion. Battery powered vehicles are also harmful because of the  pollutants that are byproducts of both creating and disposing of them. If the  world could end its dependence on oil and transition to fuel cells, our  pollution levels would be a fraction of what they are now. In China, many  cities are filled with smog because of the way they are powered. If China were  to replace their coal plants with fuel cells, the ever increasing smog  throughout China would begin to fade. Also, we  would no longer have to worry about pollution from oil spills or oil wells. 
    </td>
   </tr>
 </table>
<!--End of Columns/Table-->

</div>

and the CSS is: CSS是:

#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;
}

I can't edit the rightcolumn CSS though because I need it like that to display the other pages properly and I'm only allowed to use one CSS sheet for the entire site. 我无法编辑rightcolumn CSS,因为我需要像这样才能正确显示其他页面,并且只允许我在整个网站上使用一张CSS工作表。

一种快速的解决方案是在右列div的声明中添加“ overflow:scroll”样式。

<div id="rightcolumn" style="overflow:scroll"> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM