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

• full width
• connected to its row above so there's no margin or red border behind

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

CodePudding user response：

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

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

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

<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>
    <div class="tr extra-info">
    extra row of info
  </div>
    <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 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Why are you not using table structure instead of div

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

You can style on table datas, whatever you want