Question

我有父子关系表

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;
}

现在父行和子行都有边框。父行具有实线，而子行具有点。

对于子行，虚线边框应从文本开始处开始，而不是在左端。

w.r.t到子行的代码应该从1.1和2.1开始

我试图剪切边框图像并将其作为背景从左侧放置20px但我无法使其工作，因为我已经给出了repeat-x（用于处理所有屏幕尺寸）。

还有其他解决方法吗？父行和子行中的文本应该是内联的

更新了jsfiddle

该解决方案应支持来自ie8，chrome，safari，firefox的跨浏览器兼容性。

Answer 1

由于tr不接受保证金或填充，我无法做到这样的缩写。

您是否尝试将td与first-child选择器一起使用？像这样：

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

或者，如果您想缩进子行的每个单元格（看看您的示例有哪些意义），请删除：first-child：

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

http://jsfiddle.net/ZPSVg/23/更新了jsFiddle以显示后者。

Answer 2

您将需要在子元素中使用具有设置宽度的空td，并在父元素上使用colspan。

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

Answer 3

使用文本缩进

<tr>
     <td colspan="2">Parent</td>
</tr>
<tr>
     <td style="text-indent: 1em;"></td><td>Child</td>
</tr>

Answer 4

这是在表格行上产生实际的右边距或左边距的方法。这应该在现代浏览器以及史前浏览器上均有效。

1 /表格无边框或背景色：

Left margin on TR tag

<table>
    <tr>
        <td>AA</td>
        <td>BBBBBBBBB</td>
        <td>CCCC</td>
    </tr>
    <tr class="leftMargin">
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr> 
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
</table>

.leftMargin td {  
    position: relative;  
    left: 60px;  
    z-index: 1;  
}

2 /表格带有单元格边框和背景颜色：

Left margin on TR tag - cells borders and background color

<table>  
    <tr>  
        <td>AA</td>  
        <td>BBBBBBBBB</td>  
        <td>CCCC</td>  
    </tr>  
    <tr class="leftMargin">  
        <td><div class="column1">A</div></td>  
        <td><div>B</div></td>  
        <td><div>C</div></td>  
    </tr>  
    <tr>  
        <td>A</td>  
        <td>B</td>  
        <td>C</td>  
    </tr>  
</table>

table{  
    border-collapse: collapse;  
}  

td {  
    border: solid 1px red;  
    background-color:yellow;  
}  

.leftMargin td {  
    border: none;  
    background-color: transparent;  
    padding: 0 0;  
}  

.leftMargin div {  
    position: relative;  
    left: 60px;  
    z-index: 1;  
    border-top: solid 1px red;  
    border-right: solid 1px red;  
    border-bottom: solid 1px red;  
    background-color: yellow;  
    margin: -1px 0;  
}  

.leftMargin div.column1 {  
    border-left: solid 1px red;  
}

浏览器支持：

此HTML / CSS代码已在以下位置成功测试：

台式机浏览器：

Windows：
IE 9
IE 11 + IE 5,7,8,9,10仿真
边缘42
Chrome 5，70
Firefox 3.6、64
Safari 4.0.3
通过https://netrenderer.com/index.php：
IE 5.5
通过https://www.browserling.com/：
Opera 10

移动浏览器：

Android 4.1.2（软糖）：
Safari 4.0
铬26
Firefox 58
iPhone 6.1.6（具有最新OS更新的iPhone 3GS）：
Safari 6.0
Chrome 29
iPad Air OS 12.1.1：
Safari 12

缩进表格行的边框

4 个答案: