CSS 显示 :table-row How to width:100%? 和 border-bottom 用于表格内容填充的行？

Question

尝试创建内容宽度为 100% 的表格，但“宽度”不起作用。任何人都可以帮助PLZ。我该如何解决？表中有“div”，因为我无法以其他方式填充内容。我需要表格边框的 paddin，我需要表格行之间的底线。如果没有“border-collapse”，“border-bottom”对表格行不起作用。所以我需要再添加一个 div 来进行填充 :(。谁能告诉我如何在不在表格中再添加一个“div”的情况下正确地做到这一点。

  .tabble {
    display: table;
    border-collapse: collapse;
    border-spacing: 10px;
    border-radius: 6px;
    width: 100%;
  }
  .table__row {
    display: table-row;
    width: 100%;
    border-bottom: 1px solid red;
  }

  .table__row:last-child {
    border: none;
  }

  .table__cell {
    display: table-cell;
    width: 20%;
    padding: 10px;
    text-align: left;
  }
.padding-div {
   padding: 5px 20px;
   width: 100%"
}
</style>
<div class="tabble">
  <div class="padding-div">
     <div class="table__row">
       <div class="table__cell">1</div>
       <div class="table__cell">1</div>
     </div>
     <div class="table__row">
       <div class="table__cell">2</div>
       <div class="table__cell">2</div>
     </div>
  </div>
</div>```

Answer 1

您的表有很多问题。

• .padding-div 的 CSS 中有一个拼写错误，" 而不是 ;。
• 表格单元格有 width:20%，这会干扰宽度计算。浏览器不知道是将两个单元格的宽度加在一起为 40% 还是 100%。删除它。
• 最大的问题是 padding div。你不能在表格中有一个普通的 div 并且里面有一个表格行。删除这个分区。如果您想要在整个表格周围留出空间，请为表格本身应用边距。

然后它就会有想要的结果。也就是说，如果您想要使整个表格与视口(viewport)一样宽。

.tabble {
  display: table;
  border-collapse: collapse;
  border-spacing: 10px;
  border-radius: 6px;
  width: calc(100% - 40px); /* changed */
  margin: 5px 20px; /* new */
  
}

.table__row {
  display: table-row;
  width: 100%;
  border-bottom: 1px solid red;
}

.table__row:last-child {
  border: none;
}

.table__cell {
  display: table-cell;
  /*width: 20%;*/ /* removed */
  padding: 10px;
  text-align: left;
}

.padding-div {
  padding: 5px 20px;
  width: 100%
}

<div class="tabble">
  <div class="table__row">
    <div class="table__cell">1</div>
    <div class="table__cell">1</div>
  </div>
  <div class="table__row">
    <div class="table__cell">2</div>
    <div class="table__cell">2</div>
  </div>
</div>

注意:如果您确实希望表格有边框，正如您在评论中所说，解决方案会有所改变。然后表格本身需要有一个填充，这意味着你不能使用 border-collapse，你必须使用 border-spacing:0 来代替，这也意味着您需要将内边框应用到单元格而不是行。

.tabble {
  display: table;
  border-spacing: 0; /* changed */
  border-radius: 6px;
  width: calc(100% - 40px); /* changed */
  padding: 5px 20px; /* new */
  border: 1px solid tan; /* purely for demo purposes */
}

.table__row {
  display: table-row;
  width: 100%;
}

.table__cell {
  display: table-cell;
  padding: 10px;
  text-align: left;
}

.table__row:not(:last-child) .table__cell {
  border-bottom: 1px solid red;
}

<div class="tabble">
  <div class="table__row">
    <div class="table__cell">1</div>
    <div class="table__cell">1</div>
  </div>
  <div class="table__row">
    <div class="table__cell">2</div>
    <div class="table__cell">2</div>
  </div>
</div>