gpt4 book ai didi

html - 如何防止表格在调整大小时溢出其封闭的 div?

转载 作者:行者123 更新时间:2023-11-28 03:49:46 30 4
gpt4 key购买 nike

我有一个使用 bootstrap 3 和一些自定义 CSS 定义的表。当我调整浏览器窗口大小时,它结束了超出封闭 div 宽度的表格,如下图所示。我正在使用 IE,开发人员工具显示没有影响此行为的计算表属性。我还检查了 trtd 动态计算的属性,但仍然没有找到导致此行为的罪魁祸首。

table overflows enclosing div

任何人都可以阐明可能引发此问题的设置吗?

<div class="pad-top pad-side">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default" ng-show="{{reportData.PnlStatistics != undefined}}" style="height: 380px">
<div class="panel-heading">
<label>Expected In-Sample PnL Statistics</label>
</div>
<div class="panel-body" style="padding-top: 5px;">
<table class="table table-x-condensed table-striped table-hover table_nowrap" id="pnlStatisticsTable" st-safe-src="pnlStatistics"
st-table="displayedPnlStatistics">
<thead>
<tr>
<th style="width: 60%;" id="name">Name</th>
<th style="width: 20%;" id="daily">Daily</th>
<th style="width: 20%;" id="optimal">Optimal</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in displayedPnlStatistics">
<td style="width: 60%; padding-top: 0px; padding-bottom: 0px;">{{data.name}}</td>
<td style="width: 20%; padding-top: 0px; padding-bottom: 0px;">{{data.DailyHedge}}</td>
<td style="width: 20%; padding-top: 0px; padding-bottom: 0px;">{{data.OptimalHedge}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

最佳答案

我发现的最佳解决方案是修改封闭的 div 样式并设置最小宽度。这可以防止封闭的父 div 缩小到内容大小以下,效果很好。

<div class="col-lg-3" style="min-width: 350px;">
...
</div>

关于html - 如何防止表格在调整大小时溢出其封闭的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43785782/

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