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表格大小問題

回答

相關問題