Bootstrap页面侧边添加组件：表格宽度自动缩减需求

最直接的方案是用CSS Flex布局，它能自动分配容器内的空间，让表格在添加侧边文本框后自动缩减宽度。具体实现步骤如下：

1. 调整页面结构 #

把表格和侧边文本框放在同一个外层容器里，结构清晰便于控制布局：

<div class="page-container">
  <!-- 表格容器 -->
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>内容1</td>
          <td>内容2</td>
          <td>内容3</td>
        </tr>
        <!-- 更多表格行 -->
      </tbody>
    </table>
  </div>
  <!-- 侧边文本框 -->
  <div class="sidebar-box">
    <p>这里是侧边文本框的内容</p>
  </div>
</div>

2. 添加CSS样式控制布局 #

核心是用flex属性让表格容器自动填充剩余空间：

/* 外层容器设置为flex布局，横向排列子元素 */
.page-container {
  display: flex;
  gap: 16px; /* 表格和文本框之间的间距，可根据需求调整 */
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* 表格容器设置flex:1，自动占据剩余所有宽度 */
.table-wrapper {
  flex: 1;
  overflow-x: auto; /* 表格内容过宽时显示横向滚动条，避免布局错乱 */
}

/* 表格占满父容器宽度 */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

/* 侧边文本框设置固定宽度，可自定义 */
.sidebar-box {
  width: 220px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
}

3. 可选：添加响应式适配 #

如果需要在小屏幕上让表格和文本框纵向排列，加个媒体查询：

@media (max-width: 768px) {
  .page-container {
    flex-direction: column;
  }
  .sidebar-box {
    width: 100%;
    margin-top: 10px;
  }
}

这个方案的优势是：

• 无需复杂计算宽度，Flex自动处理空间分配
• 表格始终占满剩余可用宽度，不会出现留白或溢出
• 布局结构清晰，易于维护和调整

内容的提问来源于stack exchange，提问作者User Deleted