显示单元格宽度：表格

Question

我使用display: table创建卡片display: 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; } .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> 

我的问题是：

1. 我想将border-bottom放在panel-title-row但不显示。 我想在左侧和右侧使用填充边框（大约24 px），但是每当我将填充属性或border-bottom放在行或其子元素上时，似乎都行不通。
2. 即使我为每个孩子设置了80％和20％， panel-title-row的孩子也不会将其父辈的宽度填满100％。 当我更改百分比时，它会影响不属于该行的col-1 。
3. 我在panel-title （命名为panel-content ）下面创建另一个table-row ，我想将其划分为3个具有相同宽度（命名为col-1 ， col-2和col-3 ）的col-3但width: 33.33%不起作用。

这是我要实现的，重点是卡和线之间的空间。

任何帮助表示赞赏！

Answer 1

希望这可以对您有所帮助，您是否希望仅使用表来完成？

 .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>