Question

当窗口收缩时，如何使面板标题的边框底部显示为全宽，水平轴显示在面板体下方？边框通常在窗口最大化时显示，但仅在窗口缩小时显示与窗口相同的宽度。这是代码：

<section class="panel">
<header class="panel-heading" style="display:block;"></header>
<div class="panel-body">
<table class="table table-hover table-bordered"></table>
</div>
</section>

.panel-heading {
  padding: 10px 20px;
  color: #535351;
  font-size: 14px;
  font-weight: bold;
  min-height: 52px;
  border-bottom: 1px solid #e5e5e5;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.panel-body {
  padding: 15px 20px 15px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: inline-block;
}

.table {
  width: 100%;
  margin-bottom: 20px;
  min-width: 1130px;
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  display: table;
}

谢谢，

Answer 1

<section class="panel">
<header class="panel-heading" style="display:block;"></header>
</section>
<section class="panel">
<div class="panel-body">
<table class="table table-hover table-bordered"></table>
</div>
</section>

这段代码解决了我的问题。只需将标题分成新的部分即可。

面板标题中的border-bottom在窗口缩小时不显示全宽

1 个答案: