表格和 div 宽度之间的差异答案

【问题标题】：Discrepancy between table and div width表格和 div 宽度之间的差异
【发布时间】：2019-05-05 23:25:30
【问题描述】：

我正在尝试使嵌套 div 的宽度相同。所以基本上我希望列的宽度与 div 相同，当表格和父 div 大小相同时。

我设法使它们几乎相同，但表格单元格中仍有一些我无法弄清楚的填充。

代码沙盒链接： https://codesandbox.io/s/wyzz001kyk

html:

<div class='header'>
  <div class='one'>One</div>
  <div class='two'>Two</div>
</div>
<table class='table'>
  <th class='one'>One</th>
   <th class='two'>Two</th>
</table>

css:

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table {
  width: 100%;
  text-align: left;
  border-spacing: 0;
  font-weight: 500;
}

.one {
  width: 60%;
}

.two {
  width: 40%;
}

【问题讨论】：

使用插入代码sn-p功能直接在问题中插入问题的副本
flex 有一个默认的flex-basis:auto，这意味着自动调整元素的大小 - developer.mozilla.org/en-US/docs/Web/CSS/flex-basis。我发现它尊重宽度的唯一方法是将最小和最大宽度设置为您想要的值

标签： html css html-table flexbox

【解决方案1】：

显式删除 th 和 td 元素的填充：

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table {
  width: 100%;
  text-align: left;
  border-spacing: 0;
  font-weight: 500;
}
.one {
  width: 60%;
}
.two {
  width: 40%;
}
/* this */
.table th,
.table td {
  padding: 0;
}

<div class='header'>
  <div class='one'>One</div>
  <div class='two'>Two</div>
</div>
<table class='table'>
  <th class='one'>One</th>
  <th class='two'>Two</th>
</table>

【讨论】：