css - CSS 表格行和单元格宽度
问题描述
在这里,我有一个非常棘手的问题。) 如何制作宽度为 100% 的第三个单元格并使底行独立于第一行?
/* Table */
* {
box-sizing: border-box;
}
.table {
display: table;
width: 300px;
margin-bottom: 1rem;
border: 2px solid rgba(255, 0, 0, .40);
}
/* Grid */
.row {
display: table-row;
}
.cell {
display: table-cell;
}
/* Grid Width */
.cell-1 {
width: 50%;
}
.cell-2 {
width: 100%;
}
/* Decoration */
body {
font-family: monospace;
font-size: 15px;
}
.cell {
line-height: 3;
text-align: center;
background-color: rgba(255, 0, 0, .3);
border: 1px solid white;
}
<div class="table">
<div class="row">
<div class="cell cell-1">1</div>
<div class="cell cell-1">2</div>
</div>
<div class="row">
<div class="cell cell-3">3</div>
</div>
</div>
解决方案
我使用 Table Tag 重写您的程序。程序写在下面。
* {
box-sizing: border-box;
}
table {
display: table;
width: 300px;
margin-bottom: 1rem;
border: 2px solid rgba(255, 0, 0, .40);
}
/* Grid */
tr {
display: table-row;
}
td {
display: table-cell;
}
/* Decoration */
body {
font-family: monospace;
font-size: 15px;
}
td {
line-height: 3;
text-align: center;
background-color: rgba(255, 0, 0, .3);
border: 1px solid white;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
</table>
推荐阅读
- python - Ansible:用于读取属性值并访问它的 XML 模块
- java - 如何修复登录/注册问题 facebook E/BufferQueueProducer: [FacebookActivity[5278]#0] 断开连接:未连接 (req=1)
- java - 在一个类中输入文本,在另一个类中显示
- javascript - 类属性在通过 jQuery 选择器删除后仍会被应用
- c++ - 在抛出 'std::bad_weak_ptr' what(): bad_weak_ptr?
- python - python警告:布尔系列键将被重新索引以匹配DataFrame索引
- python - 有没有办法将月份日期列拟合到具有分类数据的多元线性回归模型中?
- php - php productcode 输入问题
- sql-server - 我正在编写一个 TSQL 过程并有一个提取数据的查询。但是它返回除以零错误异常
- javascript - 使用 .json() 时 readableStream 被锁定