Clever Geek Handbook

Tr border not on the right side 100% heigh

Why is the border in the middle (between the tr's) not 100% high? How can I change it? Here's a demo:

.one_tutorial{
    display: block;
    border-collapse: collapse;
    border: 4px solid rgb(25, 25, 25);
}

.one_tutorial_title{
    display: inline-block;
    padding: 5px 20px;
    width: 300px;
    border-right: 4px solid rgb(25, 25, 25);
}

.one_tutorial_info{
    display: inline-block;
    padding: 5px 20px;
    width: 200px;
}
      

        
        
        
      

    
<table> 
    <tr class="one_tutorial"> 
        <td class="one_tutorial_title">Wie bewässere ich meine Pflanzen</td> 
        <td class="one_tutorial_info">Geschrieben von ???, am 17.05.2015 um 14:07 Uhr</td> 
    </tr> 
</table>
Run codeHide result


+3


source to share


2 answers


The reason was 5px top / bottom padding; here is your solution:

Job: DEMO



CSS

.one_tutorial_title{
    display: inline-block;
    padding: 10px 20px;/*Changed to 10px from 5px*/
    width: 300px;
    border-right: 4px solid rgb(25, 25, 25);
}

.one_tutorial_info{
    display: inline-block;
    padding: 0px 20px;/*Changed to 0px from 5px*/
    width: 200px;
}
+2


source


You can safely remove your changes to the properties of display

your table items if you apply table-layout: fixed;

to your table. I am assuming that you did this because you are not assigning the tables that you assigned them to correctly?



0


source






More articles:


All Articles