CSS显示：表格行如何宽度：100％？表格内容的填充行的边框底部？

Question

尝试创建具有 100% 宽度内容的表格，但“宽度”不起作用。任何人都可以帮助PLZ。我该如何解决？并且表格内有“div”，因为我无法以另一种方式填充内容。我需要表格边框的填充，我需要表格行之间的底线。没有“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% 宽。删除它。
• 最大的问题是填充 div。您不能在表格内有一个普通的 div 并在里面有一个表格行。删除这个 div。如果您想在整个表格周围留出空间，请为表格本身应用边距。

那么它就会得到想要的结果。也就是说，如果您想要使整个表格与视口一样宽。

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

注意：如果您确实希望表格有边框，正如您在 cmets 中所说，解决方案会有所改变。然后表格本身需要有一个填充，这意味着你不能使用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>