CODEWITHSUNDEEP
htmlcssbordercss-tables
Alpesh Prajapati
Alpesh Prajapati

Reputation: 1643

How to separate row in table using border

I have a table in which I have to separate a row using border as in image below.

enter image description here

As you can see, Border separator is having a space left-right side and not fully touched to table border.

I tried giving padding,margin but nothing worked.

tr {
    border-bottom: 1px solid blue;
    padding: 10px; // not working
    margin: 10px; // not working
}

https://jsfiddle.net/alpeshprajapati/s934Lpbx/

What is the way to achieve this?

Upvotes: 0

Views: 207

Answers (3)

Manish Patel
Manish Patel

Reputation: 3674

Try this:

table {
  border: 1px solid black;
  border-collapse: collapse;
}
thead {
    background: black;
    color: white;
}
th {
    width: 100px;
}
tr {
 // border-bottom: 1px solid blue;
}
td{
  padding:5px 10px;
}
.border{
  background:skyblue; 
  width:100%; 
  height:2px;
}
<table>
  <thead>
    <th>Th1</th>
    <th>Th2</th>
    <th>Th3</th>
  </thead>
  <tbody>
    <tr>
      <td>TD1</td>
      <td>TD2</td>
      <td>TD3</td>
    </tr>
    <tr>
      <td colspan="3">
        <div class="border"></div>
      </td>
    </tr>
    <tr>
      <td>TD1</td>
      <td>TD2</td>
      <td>TD3</td>
    </tr>
    <tr>
      <td colspan="3">
        <div class="border"></div>
      </td>
    </tr>
    <tr>
      <td>TD1</td>
      <td>TD2</td>
      <td>TD3</td>
    </tr>    
    
  </tbody>
</table>

Upvotes: 1

ramgopal chaudhary
ramgopal chaudhary

Reputation: 224

CSS

table {
  border: 1px solid black;
  border-collapse: collapse;
}
thead {
    background: black;
    color: white;
}
th {
    width: 100px;
}
tr {
    float: left;
    border-bottom: 1px solid blue;
    width: 90%;
    margin: 0 10px;
}
td{
  width: 32%;
  float: left;
}

Upvotes: 1

R.J
R.J

Reputation: 9

To increase the length of the border you have to increase the width of the div that is containing it.

Upvotes: 0

Related Questions