td內部重疊將表格單元向外推

在td內使用重疊時，我正面臨佈局問題。讓我顯示我的HTML。td內部重疊將表格單元向外推

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="theme.css"> 
    <script type="text/javascript" src="jquery-1.7.1.js"> 
    </script> 
    <script type="text/javascript"> 
     function alterControl() { 
      var $visibleCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayVisible"); 
      var $hiddenCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayHidden"); 
      $visibleCtrl.removeClass("divOverlayVisible").addClass("divOverlayHidden"); 
      $hiddenCtrl.removeClass("divOverlayHidden").addClass("divOverlayVisible"); 
     } 
    </script> 
</head> 
<body> 
    <table id="servicesTable"> 
     <thead> 
      <tr> 
       <th> 
        <label id="lblServiceName"> 
         Name</label> 
       </th> 
       <th> 
        <label id="lblResult"> 
         Result</label> 
       </th> 
      </tr> 
     </thead> 
     <tr id="ID1"> 
      <td> 
       <input style="width: 100px;" id="txtName1" name="txtName1" type="text" value="Service1" /> 
      </td> 
      <td> 
       <div class="overlayOuter"> 
        <div id="ServiceTestResult1" class="divOverlayVisible"> 
         <input type="text" value="This is static text" id="Testresult1" style="width: 40px; 
          height: 16px;" /> 
        </div> 
        <div id="ServiceTestResultTestImage1" class="divOverlayHidden"> 
         <img src="Validated_16.png" alt="Image not found" style="width: 16px; height: 16px;" /> 
        </div> 
       </div> 
      </td> 
     </tr> 
    </table> 
    <input type="button" id="btnToggle" value="Alter" onclick="alterControl()" /> 
</body> 
</html>

我的CSS是像下面

.overlayOuter 
{ 
    position:relative; 
    height:100%; 
    width:100%; 
} 

.divOverlayHidden 
{ 
    top:0px; 
    left:0px; 
    position:absolute; 
    visibility:hidden; 
    z-index:101; 
} 

.divOverlayVisible 
{ 
    top:0px; 
    left:0px; 
    position:absolute; 
    visibility:visible; 
    z-index:100; 
}

，我現在面臨的問題是，在我的第二列的表格單元格是獲得外排。我的想法是根據輸入一次顯示文本框或圖像。請找到它們上傳在SkyDrive中 https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!130 https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!131

誰能告訴我怎麼解決這個問題的截圖嗎？

來源

2013-04-24 Sajan

表 - Aaaah災難，使用div來設計佈局和使用表格數據 – 2013-04-24 08:24:39

我使用表格來表示表格數據，而不是創建佈局。這太糟糕了嗎？ – Sajan 2013-04-24 08:29:13

不，這根本不算什麼 - 這就是表格的用途。但最糟糕的是，您發佈的屏幕截圖需要先登錄skydrive才能看到它們 - 不過謝謝。請發佈一個實例，使用jsfiddle.net或其他。 – CBroe 2013-04-24 08:48:49

我看不到圖像，因爲我不是會員，對不起。但我已經recreate the problem中的jsfiddle，並且，如果我刪除position:absolute;從.divOverlayVisible似乎正常工作：Example

.divOverlayVisible { 
    top:0px; 
    left:0px; 
    /*position:absolute; I have removed this line */ 
    visibility:visible; 
    z-index:100; 
}

編輯：如果您需要的位置，使z_index工作，你可以將該值absolute改變relative而不是將其刪除。

來源

2013-04-24 08:48:52 Arkana

td內部重疊將表格單元向外推

回答

相關問題