HTML怎么把图片占满表格,CSS解决表格或图片内容将页面撑开的办法

Bertha 。 2022-10-06 07:52 23阅读 0赞

在制作页面，添加资料的时候，可能会遇到这种情况，客户提供的表格数据太宽，把页面撑开了，我也遇到这样的问题，当我尽量给表格减肥，发现还是不行的时候，偶忽然想到了overflow:auto，这个属性。

在这个大的数据表格外面套一个div，class是box，页面源码

css这样写

<table style="background:#FB7;"> 
 <tbody> 
  <tr> 
   <td>&nbsp;代码如下</td> 
   <td align="center">复制代码</td> 
  </tr> 
  <tr> 
   <td colspan="2">.box{width:520px; overflow:auto;}<p>css定义了这个div的overflow“auto”的属性，还有就是要给这个div一个适合这个页面的宽度。</p><p>这样，当“box”里面的内容宽度大于css定义的宽度时，就会出现滚动条了。里面的内容可以是表格，也可以是图片等等。</p><p>在上上面overflow:auto的问题中，为了不让内容撑开，我用了 </p> 
    <table style="background:#FB7;"> 
     <tbody> 
      <tr> 
       <td>&nbsp;代码如下</td> 
       <td align="center">复制代码</td> 
      </tr> 
      <tr> 
       <td colspan="2">.box{width:520px; overflow:auto;}<p>但是这样会出现一个问题，就是横向和竖直滚动条都会出现，因为如果只定义了overflow，竖直滚动条会因为横向滚动条占用的空间而一直出现，后来为了隐藏竖直的滚动条，我这样写 </p> 
        <table style="background:#FB7;"> 
         <tbody> 
          <tr> 
           <td>&nbsp;代码如下</td> 
           <td align="center">复制代码</td> 
          </tr> 
          <tr> 
           <td colspan="2">.box{width:520px; overflow:auto;overfolw-y:hidden;}<p>隐藏了竖直滚动条，问题虽然解决了，但是换个角度去想，为什么是让它出现了再隐藏，而不是不让它出现。查过了苏沈小雨-样式表中文手册以后发现只要定义overfolw-x的属性就可以了。 </p> 
            <table style="background:#FB7;"> 
             <tbody> 
              <tr> 
               <td>&nbsp;代码如下</td> 
               <td align="center">复制代码</td> 
              </tr> 
              <tr> 
               <td colspan="2">.box{width:520px; overfolw-x:auto;}<p>如果不超过所定宽度，不显示滚动条，超过了宽度只显示横向滚动条，因为没有对竖直滚动overfolw-y定义，所以竖直滚动条也没有出现。</p><p>语法：</p><p>overflow-x: visible | auto | hidden | scroll</p><p>参数：</p><p>visible: 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的宽度。</p><p>auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条</p><p>hidden: 不显示超过对象宽度的内容</p><p>scroll: 总是显示横向滚动条</p><p>overfolw-y与上面overflow-x相似，想要固定垂直高度，出现垂直滚动条的话，只要定义高度和overfolw-y的属性就可以了。</p></td> 
              </tr> 
             </tbody> 
            </table></td> 
          </tr> 
         </tbody> 
        </table></td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
 </tbody> 
</table>