CODEWITHSUNDEEP
htmlcss
aywoki
aywoki

Reputation: 199

How to remove the cell separation line from a table, while preserving the last cell's horizontal line with CSS?

Given a table like this:

table {
  padding: 10px;
  border: 0px solid black;
  border-radius: 10px;
  border-spacing: 75px 0px;
  padding-left: 50px;
}

td {
  height: 20px;
  padding: 15px;
  width: 50%;
  border-top: none;
}
<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: unset;">
      <th>Col 1</th>
      <th>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Aliquet nibh praesent tristique magna sit amet. Sed sed risus pretium quam vulputate. Augue eget arcu dictum varius duis. Volutpat
        est velit egestas dui. Porta non pulvinar neque laoreet suspendisse interdum </td>
      <td>Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant.</td>
    </tr>
    <tr>
      <td>Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Nec feugiat in fermentum posuere urna nec tincidunt praesent. Nec dui nunc mattis enim ut.</td>
    </tr>
    <tr>
      <td>lorem ipsum dolor sit. Neque sodales ut etiam sit amet nisl purus in. Sed cras ornare arcu dui vivamus arcu felis. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum
        odio eu feugiat. In arcu cursus euismod quis viverra nibh cras. Ornare massa eget egestas purus viverra. Sit amet commodo nulla facilisi nullam vehicula.</td>
      <td>Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Dolor sed viverra ipsum nunc aliquet bibendum enim. Sit amet volutpat consequat mauris nunc congue nisi vitae.</td>
    </tr>
    <tr>
      <td>Eget arcu dictum varius duis at. Diam quam nulla porttitor massa id neque.</td>
      <td> Dignissim cras tincidunt lobortis feugiat. Facilisi cras fermentum odio eu feugiat.</td>
    </tr>
  </tbody>
</table>

How can I replace for a space the separator line between each row, leaving the last buttom line so the table is complete, something like this:

enter image description here

So far I tried to add to the style this:

  border-bottom: none;

And

td:last-child{
      border-bottom: 0px solid black;

}

However, the problem is that the above removes the last line in the table:

enter image description here

What is the correct way of replacing the horizontal lines that separate each row in the table, while preserving the last line, so the table looks "closed"?

Upvotes: 2

Views: 620

Answers (2)

M Adeel Ahsan
M Adeel Ahsan

Reputation: 213

just add this in your css. Basically what it does it check for if tr is not a last child than it will remove the border of its td child

tr:not(:last-child) td {
    border-bottom: none;
}

Upvotes: 1

Aahad
Aahad

Reputation: 577

I tried this and I hope this will help you with it!

 table {
                padding: 10px;
                border: 0px solid black;
                border-radius: 10px;
                border-spacing: 75px 0px;
                padding-left: 50px;
              }
              
              p {
                height: 20px;
                padding: 15px;
                width: 50%;
                border-top: none;
              }
    <DOCTYPE! html>
        <html>
        <head>
        
           
        </head>
        
        <body>
           
              <table border="1" class="dataframe">
                <thead>
                  <tr style="text-align: unset;">
                    <th>Col 1</th>
                    <th>Col 2</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                      <td>
                    <p>i guess this will work fine for you</p>
                    
                    <p>ss</p>
                    <p>ss</p>
                    <p>ss</p>
                    <p>ss</p>
                    <p>ss</p>
                <p>ss</p>
                </td>
                <td>
                    <p>hello does this works fine </p>
                    <p>ss</p>
                    
                    <p>ss</p>
                    <p>ss</p>
                    <p>ss</p>
                    <p>ss</p>
                    <p>ss</p>
                </td>  
               
                  </tr>
                </tbody>
              </table>
        </body>
        </html>
 

thanks

Upvotes: 1

Related Questions