HTML表格大小问题

我所拥有的是一张桌子，我希望放在页面中央，在桌子的两侧放置两个横幅广告，左右广告接近边缘页面尽可能与5px的边距。我已经准备好了，但我希望桌子也能够接近广告。所发生的事情是依赖于屏幕分辨率，表格要么太大，因此将广告移动到下一行，或者如果在11英寸的屏幕上，表格太小。HTML表格大小问题

我把我的问题的屏幕截图，可以在这里找到：

i.imgur.com/SCypuj2.png 。

问题是，如果你看右边的广告，它离表格很远，但由于屏幕分辨率而改变。如果它是一个小型监视器，它可能是完美的，或者会太小，将广告推到下一行。

HTML：

<div class="left-ad">[adsense stuff]</div> 
<table class="tl"> 
    <tr> 
     <th width="100%" colspan="3">Filename</th> 
     <th>Size&nbsp; 
      <img src="./images/icons/size.gif" alt="Sort" /> 

     </th> 
     <th>Downloaded&nbsp; 
      <img src="./images/icons/down.png"> 
     </th> 
     <th>Date Added&nbsp; 
      <img src="./images/icons/added.png"> 
     </th> 
    </tr> 
<div class="right-ad">[adsense stuff]</div>

CSS：

.left-ad { 
    float: left; 
    width: 160px; 
    min-height: 100px; 
    padding-left: 10px; 
} 
.right-ad { 
    float: right; 
    width: 160px; 
    min-height: 100px; 
    padding-right: 10px; 
} 
table.tl { 
    display: inline; 
    float: left; 
    min-height: 100px; 
    padding: 0 10px; 
    width: 71%; 
}

我也更新了我的fiddle。

来源

2013-05-04 user1695704

下面是一个代码，你需要，（复制 - 粘贴一下，看看导致浏览器。）

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
    <HTML> 
    <HEAD> 
     <style> 
    .left-ad { 
     float: left; 
     width: 94px; 
     min-height: 500px; 
     padding-left: 10px; 
     border:1px solid black; 
    } 
    .right-ad { 
     float: right; 
     width: 160px; 
     min-height: 500px; 
     padding-right: 10px; 
     border:1px solid black; 
    } 
    table.tl { 
     display: inline; 
     float: left; 
     min-height: 100px; 
     padding: 0 10px; 
     width: 71%; 
    } 
     </style> 
    </HEAD> 

    <BODY> 
     <div class="left-ad">[adsense stuff]</div> 
    <table class="tl" border = "1"> 
     <tr> 
      <th width="100%" colspan="3">Filename</th> 
      <th>Size&nbsp; 
       <img src="./images/icons/size.gif" alt="Sort" /> 

      </th> 
      <th>Downloaded&nbsp; 
       <img src="./images/icons/down.png"> 
      </th> 
      <th>Date Added&nbsp; 
       <img src="./images/icons/added.png"> 
      </th> 
     </tr> 
     <div class="right-ad">[adsense stuff]</div> 

    </BODY> 
    </HTML>

来源

2013-05-04 06:08:03

你测试那个代码？它实际上并不奏效，Shivram。 – 2013-05-04 06:16:30

是的，我测试它，它的工作与我很好，左侧和右侧添加和您的数据在中心。试试吧。复制并粘贴整个代码@ ralph.m – 2013-05-04 06:20:48

这就是我所做的，它不起作用。您可能只是在一个宽度上进行测试。调整浏览器窗口大小，看看会发生什么。 – 2013-05-04 06:24:04

一种方式来处理这将是这样的：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
.wrap {position: relative;} 
.left-ad, .right-ad {width: 160px; height: 200px; background: gray; position: absolute; top: 0;} 
.left-ad {left: 10px;} 
.right-ad {right: 10px;} 
table {margin-left: 180px; margin-right: 180px; background: blue;} 
</style> 

</head> 
<body> 

<div class="wrap"> 
    <div class="left-ad">[adsense stuff]</div> 

    <table class="tl"> 
     <tr> 
      <th width="100%" colspan="3">Filename</th> 
      <th>Size&nbsp; 
       <img src="./images/icons/size.gif" alt="Sort" /> 

      </th> 
      <th>Downloaded&nbsp; 
       <img src="./images/icons/down.png"> 
      </th> 
      <th>Date Added&nbsp; 
       <img src="./images/icons/added.png"> 
      </th> 
     </tr> 
    </table> 

    <div class="right-ad">[adsense stuff]</div> 
</div> 

</body> 
</html>

来源

2013-05-04 06:11:47

耶！完美的工作，谢谢。 – user1695704 2013-05-04 06:17:41

HTML表格大小问题

回答

相关问题