CODEWITHSUNDEEP
htmlcss
Joshua Ohana
Joshua Ohana

Reputation: 6121

How to apply css border-spacing to every other row?

I am building a css table using display: table that needs to satisfy two requirements

  1. Bottom half of each row is custom content that spans full width of table
  2. Visible margin between rows

I've tried messing with colspan and border spacing but haven't been able to make it work

Closest is using border-spacing and an additional table row, but I can't make the border-spacing only apply to every other row, and can't make my custom row full width of the table

<div class="table">
  <div class="tr">
    <div class="td">aaaa 1</div>
    <div class="td">aaaa 2</div>
    <div class="td">aaaa 3</div>
    <div class="td">aaaa 4</div>
  </div>

  <div class="tr extra-info">
    extra row of info
  </div>
</div>

.tr { 
  display: table-row; 
  box-shadow: 0px 5px 12px red;
  background-color: $white;
}
.td { 
  display: table-cell;
  padding: 20px;
}
.extra-info {
  display: table-cell;
  height: 40px;
}

See https://codepen.io/joshuaohana/pen/VwzWbZp for non working example

I'd like to make the "extra row of info" in the codepen here

How can I set this up with colspan or border-spacing or some other?

Upvotes: 0

Views: 289

Answers (2)

Ali Mustafa
Ali Mustafa

Reputation: 764

I am inserting another answer because I am unable to create a fiddle or codepen. So in this snippet, you can see that the margin is showing through the background, I suppose this is what you mean by that. I added another div, just above the table row, and included the extra-info in that div, and named it row1 and row 2 for each row and its extra-info. Now the key here is the display property "table-row-group" that allows us to cover row data and extra info in a div otherwise the width of the row is messed up. As for the spacing between the header and the rows+extra-info is concerned I "think" the best way is to use br below every div where you want to insert space.

.main{
    margin: 20px;
    border-collapse: separate;
  }
  .table {
    display: table;
    margin: auto;
    width: 100%;
    table-layout: auto;
  }
  
  .th {
    display: table-row;
    cursor: pointer;
  }
  .tr{
    display: table-row;
    cursor: pointer;
    outline: 1px solid red;
  }
  .td {
    display: table-cell;
    text-align: left;
    padding: 20px;
    
  }
  
  div .th {
    outline: 2px solid black;
    box-shadow: 0px 5px 12px black;
  }
  .extra-info{
    display: table-row;
    outline: 1px solid black;
    height: 35px;
    width: 100%;
  }
  .style{
  color: black;
  }
  #row1{
      display: table-row-group;
      box-shadow: 0px 5px 12px black;
    border-spacing: 0em 3rem;
  }
 #row2{
    display: table-row-group;
    box-shadow: 0px 5px 12px black;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="hw1.css">
</head>
<body>
    <div class="main">
        <div class="table">
          <div class="th">
           <div class="td">Heading 1</div>
          <div class="td">Heading 2</div>
          <div class="td">Heading 3</div>
          <div class="td">Heading 4</div>
          </div>
          <br>
          <div id="row1">
          <div class="tr row">
           <div class="td">aaaa 1</div>
          <div class="td">aaaa 2</div>
          <div class="td">aaaa 3</div>
          <div class="td">aaaa 4</div>
          </div>
          <div class="tr extra-info">
          extra row of info
        </div>
    </div>
        <br>
        <div id="row2">
          <div class="tr row">
            <div class="td">bbbb 1</div>
          <div class="td">bbbb 2</div>
          <div class="td">bbbb 3</div>
          <div class="td">bbbb 4</div>
          </div>
          <div class="tr extra-info">
          extra row of info
        </div>
        </div>
      </div>
</body>
</html>

Upvotes: 1

Ali Mustafa
Ali Mustafa

Reputation: 764

When you declare the width of the table the spacing between the table data is automatically calculated. You can make a div main to give it a box-shadow property. I have given a solid 1px black border to rows, if you want to give a border for columns you have to write the outline: 1px solid black in .td.

.main{
  margin: 20px;
  box-shadow: 0px 5px 12px red;
  border-collapse: separate;
}
.table {
  display: table;
  margin: auto;
  width: 100%;
  table-layout: auto;
}

.th {
  display: table-row;
  cursor: pointer;
}
.tr{
  display: table-row;
  cursor: pointer;
  outline: 1px solid red;
}

.td {
  display: table-cell;
  text-align: left;
  padding: 20px;
  
}

div .th {
  outline: 2px solid black;
}
.extra-info{
  display: table-row;
  outline: 1px solid black;
  height: 35px;
  width: 100%;
}
.style{
color: black;
}
.tr{

}
<div class="main">
  <div class="table">
    <div class="th">
     <div class="td">Heading 1</div>
    <div class="td">Heading 2</div>
    <div class="td">Heading 3</div>
    <div class="td">Heading 4</div>
    </div>
    <br>
    <div class="tr">
     <div class="td">aaaa 1</div>
    <div class="td">aaaa 2</div>
    <div class="td">aaaa 3</div>
    <div class="td">aaaa 4</div>
    </div>
    <div class="tr extra-info">
    extra row of info
  </div>
  <br>
    <div class="tr">
      <div class="td">bbbb 1</div>
    <div class="td">bbbb 2</div>
    <div class="td">bbbb 3</div>
    <div class="td">bbbb 4</div>
    </div>
    <div class="tr extra-info">
    extra row of info
  </div>
  </div>
</div>

Upvotes: 0

Related Questions