Indenting borders for table row <tr>

user_1732241 0
Viewed 13101

I have parent child relationship table

http://jsfiddle.net/ZPSVg/

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

Now both parent row and child row have borders. Parent rows have solid while child rows have dotted.

For child rows the dotted border should start where text starts rather at the left end.

w.r.t to the code for child rows it should start at 1.1 and 2.1

I tried to cut the border image and place it as background for tr positioning 20px from left but i am not able to get it work since i hav given repeat-x( for handling all screen size).

Is there any other work around for this? the text in parent and child rows should be inline

UPDATED the jsfiddle

the solution should support cross browser compatibilty from ie8, chrome , safari, firefox.

css
4 Answers

Use text-indent

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

This is how to produce a real right or left margin on an table row. This should work on a contemporary browser as well as on a prehistoric one.

1/ Table WITHOUT borders or background color:

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/ Table WITH cell borders and background color:

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

Browser support:

This HTML/CSS code was successfully tested on:

Desktop browsers:

Mobile browsers:

  • Android 4.1.2 (Jelly Bean):
    Safari 4.0
    Chrome 26
    Firefox 58

  • iPhone 6.1.6 (iPhone 3GS with most recent OS update):
    Safari 6.0
    Chrome 29

  • iPad Air OS 12.1.1:
    Safari 12

user_31600600
Related