Odoo QWeb中如何实现单个表格仅中间内容横向滚动？

当然可以实现！你之前的尝试踩了HTML表格的结构规范坑——<tr>标签的直接子元素只能是<td>或<th>，你嵌套的<div>会被浏览器自动移出<tr>，所以完全起不到包裹中间列的作用。

下面是一个符合规范且能在Odoo QWeb里正常渲染的方案，用CSS的position: sticky来固定首尾列，中间列自然随表格横向滚动：

第一步：调整CSS样式 #

我们需要给表格容器设置横向滚动，同时给首尾列添加粘性定位，还要处理表头固定（避免纵向滚动时表头消失）：

/* 表格容器，负责横向滚动 */
.table-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 15px; /* 避免滚动条覆盖内容 */
}

/* 主表格样式 */
.timesheet-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框，避免错位 */
}

.timesheet-table th, .timesheet-table td {
  border: 1px solid black;
  padding: .5em 1em;
}

/* 固定首列（Projects）在左侧 */
.timesheet-table th:first-child,
.timesheet-table td:first-child {
  position: sticky;
  left: 0;
  background-color: white; /* 设置背景色，防止滚动时被后面内容穿透 */
  z-index: 1;
}

/* 固定末列（Totals）在右侧 */
.timesheet-table th:last-child,
.timesheet-table td:last-child {
  position: sticky;
  right: 0;
  background-color: white;
  z-index: 1;
}

/* 表头粘性固定（可选，纵向滚动时表头不消失） */
.timesheet-table thead th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 2;
}

第二步：修改QWeb代码 #

不需要在<tr>里嵌套额外的div，直接用你想要的单个表格结构即可，CSS会帮我们完成固定列的逻辑：

<div class="table-container">
  <table class="timesheet-table">
    <thead>
      <tr>
        <th t-att-height="th_height">Projects</th>
        <t t-foreach="month_days" t-as="day">
          <th t-att-height="th_height">
            <h5><div><t t-esc="day[0]"></t></div></h5>
            <h6><t t-esc="day[2]"/> <t t-esc="day[1]"/></h6>
          </th>
        </t>
        <th t-att-height="th_height">Totals</th>
      </tr>
    </thead>
    <tbody>
      <t t-foreach="range(projects_num)" t-as="project">
        <tr>
          <td> Nome progetto </td>
          <t t-foreach="month_days" t-as="day">
            <td> 00:00 </td>
          </t>
          <td> 45:00 </td>
        </tr>
      </t>
    </tbody>
  </table>
</div>

关键注意事项 #

• 一定要给固定列设置背景色：如果不设置，滚动时后面的单元格内容会透过固定列显示出来，影响视觉效果。
• 用border-collapse: collapse：避免表格边框因为粘性定位出现错位。
• 表头的粘性定位是可选的：如果你的表格内容不会纵向溢出，可以去掉这部分样式。

这个方案完全符合HTML规范，并且能在Odoo QWeb引擎下正常渲染，完美实现你想要的“首尾列固定、中间日期列横向滚动”的效果。

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