定位嵌套表到右細胞

告訴你我想才達到什麼是最好的方式顯示圖片： enter image description here 定位嵌套表到右細胞

我試着嵌套表格定位到列的側方。我尋找解決方案，但沒有發現任何有趣的事情。當我玩「位置：絕對;」我的傷害比好的結果還要多。是否有可能像圖片中那樣做？

編輯：這不是我的項目，我對設計沒有任何影響。它是基於表格，我必須處理它:)

2011-07-07 TrN

你可以漂浮它.. ~~或者你可能只是讓該單元格把它設置爲 text-align: right取決於它還有什麼其他的單元格是否你只需要嵌套表的權利..~~ （即不在所有的瀏覽器）

<table width="100%" border="1"> 
<tr> 
<td> 
    <table style="background: red;"> 
     <tr> 
      <td>left</td> 
     </tr> 
    </table> 
</td> 
<td> 
    <table style="background: green; float: right"> 
     <tr> 
      <td>right</td> 
     </tr> 
    </table> 
</td> 
</tr> 
</table>

來源

2011-07-07 11:27:26 clairesuzy

它留了幾個小時，但如果downvoter或downvote同情者想告訴我，爲什麼這是錯的或者這是什麼，並隨後回答之間的差異（不向下表決） - 我會很樂意刪除或修改，在這一切都不是幫助OP？ – clairesuzy

如果你能夠使用的div來代替table標籤包含了兩下，有左，右格，而不是你的兩個TD標籤是這樣的：

<div class="left"><table></table></div> 
<div class="right"><table></table></div>

然後只是添加一些CSS

<style type="text/css"> 
    .left, .right { 
    width:300px;   
    } 
    .left { 
    float:left; 
    } 
    .left table, .right table { 
    width:63%; 
    } 
    .right table { 
    float:right; 
    } 
</style>

我會去那條路線應該使用表。如果它不起作用，您可能需要將td標籤的顯示類型更改爲阻止。也就是說，我之前沒有嘗試過，我不確定它會如何工作。

來源

2011-07-07 11:28:14 agmcleod

嗯...所以我覺得我可以做的事端，如：

...

吧？ – TrN

我建議避免使用表格來包裝div。默認情況下，按照您希望的方式對齊表格會很棘手。你用什麼表格標籤？ – agmcleod

-2

做這些記錄記：

絕對定位和浮動孩子造成Great Collapse。所以，你的手機可能會變得不可預知。
現在，嵌套表格並不常見。也許你的設計是錯誤的。你考慮過其他設計嗎？也許在表格單元內的div元素，在列表項內嵌套表格？
表格本質上是塊級元素。也就是說，默認情況下，表格會嘗試填充其父寬度。因此，要獲得您的結果，您需要爲它們指定寬度。

我的建議，遠離表格。使用CSS定位。

來源

2011-07-07 11:33:45

re：＃1 - 表格單元格建立一個新的塊格式化上下文，所以不會崩潰 - 表格單元格將包含浮動--re：＃3這是不正確的，如果你不給你的表的寬度，它會縮小以適合。它是一個表格元素，實際上它更像是一個「內聯塊」。 – clairesuzy

如果它是我的項目我永遠不會使用表格佈局......但它是「舊學校程序員」的網絡應用程序，我對這部分沒有任何影響...; x嗯，我無法檢查所有現在回答，但我會盡力去做，並告訴你結果。 :) – TrN

如果您在包含<td>中沒有任何更多內容，則可以將其浮動到右側;

/* select nested tables in td's that have a preceding td sibling, effectively the second column */ 
table td + td table { 
    float: right; 
}

jsfiddle demo

來源

2011-07-07 11:48:20 xec

定位嵌套表到右細胞

回答

相關問題