3 回答
TA贡献1796条经验 获得超4个赞
你需要考虑table-layout: fixed;
.divTable {
display: table;
width: 100%;
table-layout: fixed;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable" style="border: 1px solid #000;">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell" style="width:10%"> </div>
<div class="divTableCell" style="width:40%"> </div>
<div class="divTableCell" style="width:50%"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div>
<div class="divTableRow">
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
</div>
</div>
</div>
TA贡献1829条经验 获得超7个赞
[您修改后的代码]
//你好,//你应该尝试这个
//我忘了还有一个属性max-width,
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
overflow: hidden;
max-width: 120px!important;
TA贡献1757条经验 获得超8个赞
表格必须由div组成吗?
如果没有,请使用 HTML<table>
标记并显式设置其宽度及其显示属性。
然后您可以设置列的宽度:
https://codepen.io/daniel-knights/pen/KKdgYzW
- 3 回答
- 0 关注
- 128 浏览
添加回答
举报