Recoll搜索结果段落宽度不固定 表格溢出列宽样式失效问题

异常表现：部分搜索结果段落未遵循预设宽度规范，可对照截图顶部符合标准的结果段落查看差异

待解决的两个核心问题：

• 限制结果表格整体宽度，解决productdata.js等长内容结果的表格超宽溢出问题
• 锁定左侧带图标、显示fit匹配度因子的列宽为100px，避免被超宽内容挤压变形

核心原因 #

• HTML表格默认使用auto自动布局模式，浏览器优先根据单元格内容长度计算列宽，手动设置的宽度规则优先级低，遇到无空格的长代码、长路径字符串时，会直接挤压其他列、撑破表格总宽度
• 原有段落模板存在HTML语法错误：表格开标签未闭合、<th>错误嵌套在<td>标签内、无效属性残留，会触发浏览器的怪异渲染模式，加重布局异常
• 左侧列仅设置了普通宽度属性，没有最小/最大宽度的强制锁定规则，直接被自动布局逻辑覆盖

修复步骤 #

1. 更新头部CSS规则，添加强制布局约束 #

将原有头部<style>块替换为以下代码，核心是固定表格布局逻辑、强制长内容换行、锁定左侧列宽优先级：

<style type="text/css">
body {
    width: 1000px;
    color: #CFCFCF;
    background-color: #1F1F1F;
    overflow-x: hidden;
}

a:link {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: orange;
  background-color: transparent;
  font-weight: bold;
  text-decoration: underline;
}

a:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

.snippet{
  background-color: #000000; 
  color: #AFAFDF;
  /* 强制长文本、无空格代码自动折行 */
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 固定结果表格布局，锁死总宽度 */
table.parspec {
  width: 850px !important;
  table-layout: fixed !important;
  background-color: #AFAFAF;
  border-collapse: collapse;
  border: 0;
}

/* 强制锁定左侧缩略图/匹配度列宽度，优先级最高不被覆盖 */
table.parspec td:first-child {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  text-align: center;
  background-color: #0F0F0F;
}

.thumbnail {
   display:block;
   position:relative;
   padding: 4px;
   width: auto;
   border:none;
   z-index:0;
}
.thumbnail:hover {
   border:none;
   background-color: transparent;
   z-index: 50;
}
.thumbnail span {
   position: absolute;
   left: -9999px;
   visibility: hidden;
}
.thumbnail span img {
   max-width:256px;
   max-height:256px;
   width:auto;
   height:auto;
   background-color: gray;
   padding: 1px;
   border: 1px solid black;
}
.thumbnail:hover span {
   visibility: visible;
   top: 4px;
   left: 88px;
}
</style>

2. 修正段落模板代码，修复语法错误 #

原有表格模板存在多处语法问题，直接替换为以下修正版本，移除冗余内联样式、统一用头部CSS控制布局：

<table class="parspec" cellpadding="0" cellspacing="0">
<tbody>
<tr>
    <td rowspan="4">
        <a class="thumbnail" href="#">
            <img src="%I" width="64px" height="auto">
            <span>
                <img src="%U">
            </span>
        </a>
        <p style="font-family: sans-serif; color: #4F9F4F; margin: 4px 0;"><b>%R</b></p>
    </td>

    <th style="font-family: sans-serif; color: #DFDFDF;
        background-color: #000000; text-align: left; padding: 8px;"
        colspan="3">
        %T
    </th>
</tr>

<tr>
    <td style="font-family: sans-serif; text-align: center;
        background-color: #000000; color: #CFCF4F; padding: 4px;">
        <b><font size=2>%M</font></b>
    </td>

    <td style="font-family: sans-serif; text-align: center;
        background-color: #000000; color: #CFCF4F; padding: 4px;">
        <b><font size=2>%D</font></b>
    </td>

    <td style="font-family: sans-serif; text-align: right;
        background-color: #000000; color: #CFCF4F; padding: 4px;">
        <b><font size=2>%S</font></b>
    </td>
</tr>

<tr>
    <td class="snippet" colspan="3" style="padding: 8px; vertical-align: top;">
        %A
    </td>
</tr>

<tr>
    <td style="background-color: #000000; color: #BFBFEF; padding: 4px;"
        colspan="3">
        <b><font size=2>%U</font></b><br>
        <span style="color: #BFBFFF">%L </span>
    </td>
</tr>
</tbody>
</table>
<br>
<br>

效果说明 #

• table-layout: fixed规则会让浏览器严格按照设定的列宽、总宽渲染表格，不会被内部内容长度影响
• 左侧列通过min-width+max-width+!important三重约束，彻底锁死100px宽度，不会被挤压
• 摘要区的强制折行规则，会把无空格的长代码、长路径自动换行，不会撑破单元格
• 修正HTML语法错误后，浏览器不会触发怪异渲染模式，所有结果项布局统一

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