可滚动表中的列大小

Question

在我提出问题之前，这里有一些背景知识......我正在实现一个JavaScript库，用于支持具有可滚动主体和固定标头的HTML表。

要求：

1. 表格布局必须与普通表格中的相同;列大小应增大或缩小以适合内容
2. 必须支持多行标题，并合理使用其中的colspan和rowspan。
3. 如果表格符合ScrollTable图书馆规定的结构，图书馆几乎可以在任何桌子上使用。
4. 支持任意数量的列。
5. 支持表格单元格的任意格式化（例如，列组之间的加厚列分隔符）

假设：

1. 标题不超过2行
2. 标题中的给定单元格可以使用colspan或rowspan，但不能同时使用
3. 标头表中的每个逻辑列至少包含一个不跨越多列的单元格。
4. 身体中的细​​胞不使用colspan或rowspan

我是如何实施的：

1. 将表分成两个表：标题单元格表和正文单元格表
2. 将每个表格包裹在<div>中，然后将其中的每个表格包含在一个“ScrollTable”<div>中
   • 包含body表的div便于滚动
   • 主<div>缩放以适应其内容display: inline-block
3. 使用table-layout: fixed允许显式列大小调整
4. 在表格单元格上使用box-sizing: border-box;和-moz-box-sizing: border-box;，以便更轻松地设置列大小
5. 实施updateLayout方法：
   • 清除任何明确的列宽，以允许在两个表中都进行自然列大小调整
   • 从标题表和正文表中循环一组代表性的单元格 - 每列一个单元格。
   • 对于每个列，从两个表中的标题或正文表中指定较大的列宽。
     • 对于标题表，如果表中有宽度，则将宽度分配给<col>元素。如果表中没有<col>元素，请尝试将宽度分配给第一行中的单元格。
     • 对于正文表，将宽度指定给表格第一行中的单元格

陷入困境但陷入困境：

1. 检索列的宽度。
   • ScrollTable需要支持多行标题。其中的单元格可能使用colspan或rowspan。所以我不能只抓住整排细胞。
   • 您无法获取列列表。如果表的标记包含<col>元素，则可以获取table-layout: fixed元素列表，但不能使用它们来访问列的宽度。
   • 你可以从列中的单元格中访问列的宽度，所以我通过编写一个循环遍历标题中单元格的函数来解决问题，并检索一组有代表性的单元格，其中细胞可能不会都来自同一行。
2. 对于<table>的表格，表格和列宽由<col>和<col>元素的宽度或第一行单元格的宽度设置。而已;后续行中的单元格不会影响列宽。
   • 这最终意味着只能通过要求具有多行标题的ScrollTable标记为每个列包含<col>元素来实现对多行标题（可能使用rowspan或colspan）的支持。标题。

我尚未克服障碍：

当我为box-sizing: border-box;元素指定宽度时，它的宽度与我为表格单元格指定相同宽度时的宽度不同。 -moz-box-sizing: border-box;和<col>似乎对<col>元素没有影响。

问题：

如何确保分配给{{1}}元素的宽度与我分配给表格单元格的宽度相同？