錶行<tr>

縮進邊框我有父子關係表錶行<tr>

HTML

<table> 

<tr class="parent_row"> 
    <td >1</td> 
    <td>2</td> 
    <td>3</td> 
    <td><a>Link</a></td> 
    <td style="width:20px;"></td> 
</tr> 
<tr class="child_row"> 
    <td >1.1</td> 
    <td>2.1</td> 
    <td>3.1</td> 
    <td><a>Link_child</a></td> 
</tr> 
<tr class="parent_row"> 
    <td >1</td> 
    <td>2</td> 
    <td>3</td> 
    <td><a>Link</a></td> 
    <td style="width:20px;"></td> 
</tr> 
<tr class="child_row"> 
    <td >1.2</td> 
    <td>2.2</td> 
    <td>3.2</td> 
    <td><a>Link_child</a></td> 
    <td style="width:20px;"></td> 
</tr> 
</table>

CSS

table{ 
    margin:0; 
    padding:0; 
    width:100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

tr{ 
    border-color: #D8D8D8; 
    border-style: solid; 
    border-width: 1px 0 0; 
    line-height:2em; 
    font-size:14px; 
} 

td:first-child{ 
    padding-left:20px; 
} 

.child_row{ 
    border-style:dotted; 
}

現在，這兩個父行和子行有邊框。父行已固定，而子行已虛線。

對於子行，虛線邊框應該從文本開始位置開始，而在左側末尾。

WRT爲子行的代碼，它應該開始在1.1和2.1

我試圖削減邊界圖像，並把它作爲背景從左TR定位爲20px，但我沒有能夠得到它，因爲工作我已經給了repeat-x（用於處理所有屏幕尺寸）。

有沒有其他解決方法？在父母子女行中的文本應該是直列

更新的jsfiddle

的解決方案應該從IE8，Chrome瀏覽器，Safari瀏覽器，火狐支持跨瀏覽器了兼容性。

來源

2013-12-19 Kumar R

很不清楚...考慮添加你的代碼和http://jsfiddle.net/或截圖 – DaniP

發佈相關的HTML，CSS代碼。 – Hiral

如果您使用了'tr + tr {text-indent：20px;}'這個工作嗎？真的很難理解你對這個問題提出的問題。我在這裏添加了這個作爲起點，但看到代碼會很有幫助。 – Phlume

由於tr不接受保證金或填充，因此我無法進行這樣的縮進。

您是否嘗試過使用td與first-child選擇器？像這樣：

tr.child_row td:first-child { padding-left:20px; }

或者，如果你想縮進子行的每一個細胞（其還挺有道理看你的例子），刪除：第一胎：

tr.child_row td { padding-left:20px; }

http://jsfiddle.net/ZPSVg/23/更新的jsfiddle展示後者。

來源

2013-12-19 17:25:02 cronoklee

這似乎是縮進表格行的正確方法。爲填充添加無關列似乎會導致可訪問性問題。 –

您將需要在子元素中使用具有設置寬度的空td，並在父元素上使用colspan。

<tr> 
    <td colspan="2">Parent</td> 
</tr> 
<tr> 
    <td style="width: 20px;"></td><td>Child</td> 
</tr>

來源

2013-12-19 17:30:25 DrCord

回答

相關問題