Cell width in display: table

Question

I create card using display: table layouting. This is my attempt so far:

 .panel-bg { background-color: #F8F8F8; height: 100%; width: 100%; margin: 0; padding: 24px 0; } .panel { width: calc(100%-32px); height: 100%; border-radius: 3px; background-color: #fff; box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15); font-size: 16px; cursor: pointer; margin: 0 16px; } .panel-title-row { display: table-row; width: 100%; border-collapse: collapse; border-bottom: solid 1px #c4c4c4; } .panel-title { display: table-cell; width: 80%; text-transform: uppercase; font-size: 14px; font-weight: 700; color: #0099ff; padding: 24px; } .panel-action { text-align: right; width: 20%; display: table-cell; } .panel-action li { margin-left: 16px; } .panel-action li:last-child { margin-left: 32px; } .col-1, .col-2, .col-3 { width: 33.33%; display: table-cell; padding: 24px; } .panel-data { margin-top: 16px; } .panel-data-label { font-weight: 700; font-size: 12px; } .panel-data-value { font-size: 13px; margin-top: 8px; } .panel-content { display: table-row; width: 100%; } .panel-data-vertical { display: table; width: 100%; } .panel-data-vertical .panel-data-label, .panel-data-vertical .panel-data-value { display: table-cell; width: 50%; } ul { list-style-type: none; } ul li { display: inline-block; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"> <div class="panel-bg"> <div class="panel"> <div class="panel-title-row"> <div class="panel-title"> Members </div> <ul class="panel-action"> <li><i class="fas fa-pencil-alt"></i></li> <li><i class="fas fa-trash"></i></li> <li><i class="fas fa-chevron-down"></i></li> </ul> </div> <div class="panel-content"> <div class="col-1"> <div class="panel-data panel-data-horizontal"> <div class="panel-data-label"> Effective Date </div> <div class="panel-data-value"> 1 Jan 2018 </div> </div> <div class="panel-data panel-data-vertical"> <div class="panel-data-label"> Employment Type </div> <div class="panel-data-value"> Permanent </div> </div> <div class="panel-data panel-data-vertical"> <div class="panel-data-label"> Job Level </div> <div class="panel-data-value"> Staff </div> </div> <div class="panel-data panel-data-vertical"> <div class="panel-data-label"> Job Title </div> <div class="panel-data-value"> All </div> </div> </div> <div class="col-2"> </div> <div class="col-3"> </div> </div> </div> </div> 

My problems are:

1. I want to put border-bottom to the panel-title-row but it doesn't show. I want to make the border with the padding (about 24 px) to the left and right but whenever i put padding properties or the border-bottom to the row or its children it seems like doesn't work.
2. panel-title-row 's children doesn't fill their parent's width to 100% eventhough I set 80% and 20% to each child. When I change the percentage, it affect the col-1 that doesn't belong to the row.
3. I create another table-row below the panel-title (named panel-content ) and I want to divide it to 3 columns with the same width (named col-1 , col-2 , and col-3 ) but the width: 33.33% doesn't work.

This is what I want to achieve, with emphasis on the space between the card and the line.

Any help appreciated!

Answer 1

Hope this may help you, do you want it to be done only using table?

 .panel-bg { background-color: #F8F8F8; height: 100%; width: 100%; margin: 0; padding: 24px 0; } .panel { width: calc(100%-32px); height: 100%; border-radius: 3px; background-color: #fff; box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15); font-size: 16px; cursor: pointer; margin: 0 16px; padding:25px; } .panel-title-row { display: block; width: 100%; border-collapse: collapse; border-bottom: solid 1px #c4c4c4; } .panel-title { display: inline-block; width: 78%; text-transform: uppercase; font-size: 14px; font-weight: 700; color: #0099ff; padding: 0; } .panel-action { text-align: right; width: 20%; display: inline-block; padding:0px 5px 15px 0; margin:0; } .panel-action li { margin-left: 10px; } .panel-action li:last-child { margin-left: 29px; } .col-1, .col-2, .col-3 { width: 33.33%; display: table-cell; padding: 5px 0px 20px 0px; } .panel-data { margin-top: 16px; } .panel-data-label { font-weight: 700; font-size: 12px; } .panel-data-value { font-size: 13px; margin-top: 8px; } .panel-content { display: table-row; width: 100%; } .panel-data-vertical { display: table; width: 100%; } .panel-data-vertical .panel-data-label, .panel-data-vertical .panel-data-value { display: table-cell; width: 50%; } ul { list-style-type: none; } ul li { display: inline-block; } 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet"> <div class="panel-bg"> <div class="panel"> <div class="panel-title-row"> <div class="panel-title"> Members </div> <ul class="panel-action"> <li><i class="fas fa-pencil-alt"></i></li> <li><i class="fas fa-trash"></i></li> <li><i class="fas fa-chevron-down"></i></li> </ul> </div> <div class="panel-content"> <div class="col-1"> <div class="panel-data panel-data-horizontal"> <div class="panel-data-label"> Effective Date </div> <div class="panel-data-value"> 1 Jan 2018 </div> </div> <div class="panel-data panel-data-vertical"> <div class="panel-data-label"> Employment Type </div> <div class="panel-data-value"> Permanent </div> </div> <div class="panel-data panel-data-vertical"> <div class="panel-data-label"> Job Level </div> <div class="panel-data-value"> Staff </div> </div> <div class="panel-data panel-data-vertical"> <div class="panel-data-label"> Job Title </div> <div class="panel-data-value"> All </div> </div> </div> <div class="col-2"> </div> <div class="col-3"> </div> </div> </div> </div>