html - 表格和 div 宽度之间的差异
问题描述
我试图使宽度与嵌套 div 相同。所以基本上我希望列的宽度与 div 相同,当表和父 div 大小相同时。
我设法使它们几乎相同,但表格单元格中仍有一些我无法弄清楚的填充。
Codesandbox 链接: 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%;
}
解决方案
从 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>
推荐阅读
- r - How can I run all subset regression and get p-values of variables per each linear regression as dataframe using dplyr?
- ruby-on-rails - Pre-defined fields for nested attribute in nested form using checkbox
- node.js - TypeError: Cannot read property 'authenticate' of null
- javascript - trim() : unexpected behavior
- reactjs - Object is possibly 'undefined' in reference to paragraph HTML element
- neo4j - Neo4J releationship between existing nodes from CSV
- java - ERROR CANNOT FIND SYMBOL when compiling a Java file
- rest - 在 Postman 中发送带有表单数据的请求时必须使用什么内容类型
- php - 上传PHP时如何重命名文件
- database - 如何在颤振中使用 sqflite 保存嵌套列表?