gpt4 book ai didi

html - 使用 div 样式的表格 - 表格单元格的宽度大于窗口大小(一行/不换行)

转载 作者:行者123 更新时间:2023-11-28 14:25:15 25 4
gpt4 key购买 nike

我需要在一行中用红色背景做这个这个绿色宽度 - 将所有红色 div 相加。

现在,在 more 的情况下,一些转到第 2、3 行等...

我需要水平滚动主窗口,但不要断行。我尝试了显示、 float 和其他样式,但最后我不知道该怎么做。

谢谢

/* DivTable.com */
.divTable{
display: table;
}
.divTableRow {
display: table-row;
}
.divTableCell, .divTableHead {
display: table-cell;
}

<div class="divTable">

<div class="divTableRow">
<div class="divTableCell">
<div style="background-color: green; padding: 10px;">dd</div>
</div>
<div class="divTableCell">&nbsp;</div>

</div>
<div class="divTableRow">
<div class="divTableCell">
<div style="background-color: red; width: 400px; float: left; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; float: left; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; float: left; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; float: left; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; float: left; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; float: left; margin-right: 5px; display: inline-block">dd</div>
</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
<!-- DivTable.com -->

最佳答案

问题已解决!!

这里是代码和解决方案

table - white-space: nowrap;

div - remove float and display: inline-block

谢谢!

/* DivTable.com */
.divTable{
display: table;

}
.divTableRow {
display: table-row;
}
.divTableCell, .divTableHead {
display: table-cell;
}

.table {
white-space: nowrap;
}
<body>
<table class="table">

<tr>
<td>
<div style="background-color: green; padding: 10px;">dd</div>
</div>
<td>&nbsp;</td>

</td>
<tr>
<td>
<div style="display: block;">
<div style="background-color: red; width: 400px; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; margin-right: 5px; display: inline-block">dd</div>
<div style="background-color: red; width: 400px; margin-right: 5px; display: inline-block">dd</div>
</div>
</td>
<td>&nbsp;</td>
</tr>
</table>
<!-- DivTable.com -->
</body>

关于html - 使用 div 样式的表格 - 表格单元格的宽度大于窗口大小(一行/不换行),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54793418/

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