如何设置Elementor表格行高/最大行高并实现单元格滚动

我在Elementor网站使用一款表格插件，希望给表格行设置最大行高，让内容过多的单元格垂直滚动，而非随内容增长高度。目前已添加white-space: nowrap;防止换行，但尝试给table、tbody、.tablesome__tbody、.tablesome__row、.tablesome__cell等元素设置height和max-height，虽Firefox开发者工具显示CSS规则生效，但实际高度未达到设置值。

表格代码片段 #

<tbody class="tablesome__tbody">
 <tr class="tablesome__row" data-state-record-id="1"> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Name">skylar</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Email">skylar@hennig.ame.com</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Primary Market A">OEMs</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Primary Market B">End Users</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Primary Market C">integrated suppliers</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Primary Markey D">machine tool distributors</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Price, delivery and performance requirements, in that order?">OEMs</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--textarea" data-label="Why that focus?"><div class="ql-editor">Competitive market, so need to be price conscience of what makes up their machine.</div></td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Natural focus for our QROC program?">end user</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--textarea" data-label="Why does QROC satisfy their needs?"><div class="ql-editor">Quick reaction time</div></td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Challenge to receive info, Market A?">Integrated Supplier</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Challenge to receive info, Market B?">Machine Tool Distributor</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--textarea" data-label="Why are they challenging?"><div class="ql-editor">Hand measuring is needed and hard to get accurate drawings.</div></td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--textarea" data-label="How can you help?"><div class="ql-editor">Fill out the data sheets, pictures, and provide as much detail on application, chip type, competitive detail, and machine type as possible.</div></td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--text" data-label="Elevator Pitch">Fives G&amp;L I know we've had our history together, both good and bad, with many different Hennig and AME products over the years at your location, and other Fives facilities across North America. While we have continued to provide excellent products and services in some areas, we've needed to make a lot of improvements in others. Of course we do understand we've got our work cut out for ourselves to compete with the strong relationships you've formed with your current vendors, we believe we're more than capable for stepping up to the occasion. Over the past few years we've made considerable efforts to improve our quality, reputation, and manufacturing resources to compete with anyone in the market. We relish the opportunity to quote any upcoming components or systems, and appreciate any insight on how we can better serve you moving forward. Perhaps we can arrange a day in the near future to host you for lunch and a tour of our facility.</td> 
  <td style="--text-color: #ffffff; --background-color: #9696eb;" tabindex="0" class="tablesome__cell tablesome__cell--date" data-label="Submission Date">August 30, 2022</td> 
 </tr>
</tbody>

当前表格显示效果 #

解决方案 #

直接给表格单元格设置height/max-height不生效，是因为表格默认table-layout: auto，单元格会自适应内容高度。正确做法是给单元格内部的内容容器设置滚动属性，同时固定单元格高度：

/* 固定表格单元格高度 */
.tablesome__cell {
  height: 100px; /* 根据需求调整高度 */
  max-height: 100px;
  overflow: hidden;
  position: relative;
}

/* 让单元格内容可垂直滚动，取消nowrap让内容正常换行 */
.tablesome__cell,
.tablesome__cell .ql-editor {
  overflow-y: auto;
  white-space: normal;
}

/* 可选：优化滚动条样式 */
.tablesome__cell::-webkit-scrollbar {
  width: 5px;
}
.tablesome__cell::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.tablesome__cell::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
.tablesome__cell::-webkit-scrollbar-thumb:hover {
  background: #555;
}

说明：

• 取消white-space: nowrap，避免内容横向溢出，改为正常换行后垂直滚动更符合用户浏览习惯。
• 若部分单元格没有.ql-editor容器（比如纯文本单元格），直接给.tablesome__cell设置overflow-y: auto即可生效。

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