在不影響第一行的情況下縮進表的每隔一行。 html/css/js/jQuery

我有一張充滿數據的表格。每隔一行是每行第一行的子行。所以每個子行都會隱藏，直到我點擊父行。子行隨後在jQuery的父項下面淡出。在不影響第一行的情況下縮進表的每隔一行。 html/css/js/jQuery

我將如何縮進父行下方的子行，以便它們顯然是父節點的子節點？

我曾嘗試將小元素添加到子行，但那看起來不正確。當我展開第二排時，它最終壓碎了第一排。

我希望這並不聽起來像jibberish ...

//HTML & CSS 
<table> 
    <tr> 
     <th id="clickDiv3"></th> 
     <th>Firstname</th> 
     <th>Lastname</th> 
    </tr> 
    <tr> 
     <th></th> 
     <td class="showThird">Peter</td> 
     <td class="showThird">Griffin</td> 
    </tr> 
    <tr> 
     <th></th> 
     <td class="showThird">Lois</td> 
     <td class="showThird">Griffin</td> 
    </tr> 
</table> 


    //JS 
    $("#clickDiv3").click(function(){ 
     $(".showThird").slideDown(".500").fadeIn(".200"); 
    });

任何幫助或建議將是非常讚賞！

來源

2013-08-22 Daft

你可以做一個小提琴 – user2408578

請發佈您的代碼。 – j08691

你可以創建一個[jsfiddle示例]（http://jsfiddle.net）？ – Dom

其實你可以不完全做到這一點與表，但你可以試試這個：

table tr:nth(3) td { 
    padding-left : 10px; 
}

但是如果你沒有那麼多列，您可以簡單地使用UL，而不是表的這種用法。看看http://cssdeck.com/labs/pure-css-tree-menu-framework

來源

2013-08-22 14:51:02 VahidNaderi

我很擔心有人會這麼說。它似乎可能是一個共同的問題，縮進子行應該是很常見的沒有？ – Daft

爲什麼它會很普遍？ – cimmanon

縮進父母下面的子行是有意義的。不是在任何情況下，而是在一些情況 – Daft

不知道這是否跨瀏覽器（只在Chrome中測試）。在偶數行中的所有單元格將被縮進（溢流表寬度）：

tr:nth-child(2n) td { 
    position: relative; 
    left: 20px; 
}

http://jsfiddle.net/3KJdX/

但是，你應該聽勸告其他用戶給你：也許一個表是不正確的結構爲您的數據。

來源

2013-08-23 12:09:19 bfavaretto

在不影響第一行的情況下縮進表的每隔一行。 html/css/js/jQuery

回答

相關問題