gpt4 book ai didi

html - 让浏览器包装表格单元格

转载 作者:可可西里 更新时间:2023-11-01 13:37:13 24 4
gpt4 key购买 nike

我有这个代码

HTML:
<div id="table">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>

CSS:
#table {
display: table;
width: 940px;
table-layout: fixed;
}
.table-cell {
display: table-cell;
overflow: hidden;
width: 220px;
height: 282px;
padding: 9px 10px;
}

是否可以让浏览器在每添加 4 个表格单元格后换行。我的意思是每 4 个表格单元格创建一个新行。

谢谢!

附言一行中只有 4 个单元格。

最佳答案

CSS:

#table {
display: table;
width: 940px;
table-layout: fixed;
}
.table-row
{display:table-row;}

.table-cell {
display: table-cell;
overflow: hidden;
width: 220px;
height: 282px;
padding: 9px 10px;
}

html:

<div id="table">
<div class="table-row" >
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
<div class="table-cell">4</div>
</div>
<div class="table-row" >
<div class="table-cell">1a</div>
<div class="table-cell">2a</div>
<div class="table-cell">3a</div>
<div class="table-cell">4a</div>
</div>
</div>

你说需要自动:

您可以将 css 更改为:

#table {
display: table;
width: 960px !important;
table-layout: fixed;
}
.table-cell {
float: left;
display: table-cell;
overflow: hidden;
width: 220px;
height: 282px;
padding: 9px 10px;
}

关于html - 让浏览器包装表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13594253/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com