Google Chrome 中缺少 MS Excel 到 HTML 网格线答案

【问题标题】：MS Excel to HTML gridlines missing in Google ChromeGoogle Chrome 中缺少 MS Excel 到 HTML 网格线
【发布时间】：2011-09-19 00:21:19
【问题描述】：

我正在尝试通过 MS Excel 2010 从 excel 电子表格 (.xls) 转换为 html，但我想保留网格线。所以我突出显示所有单元格-> 格式单元格-> 轮廓和内边框预设、正常边框、黑色，然后进行导出。用 IE 和 Firefox 浏览，边界就在那里。但是，当用 chrome 查看时，边框消失了，我看到的是 style="border-left: none;"每个 td 标签内。

这样做的目的是为网页制作一个 excel 电子表格预览，看起来导出到 html 的路线可能是最简单的。有人知道更好的路线吗？

我认为我唯一的解决方案可能是专门为 chrome 检查 javascript 并编辑所有 td 标签上的边框左/右/上/下样式。我有什么遗漏吗？

另外，有没有办法在html版本中保留行号和列字母标题？

【问题讨论】：

标签： html excel

【解决方案1】：

您可以对源代码读取为border-left:none、border:none 等的所有实例进行查找/替换...然后使用 css 样式确保网格线与数据保持一致。假设它被导出为一个表，使用

<style type="text/css">
    table{
       border: 2px solid #000000;
    }
    td{
       border: 1px solid #000000;
    }
</style>

（根据自己的口味和喜好格式化）

至于行号和列标题，这取决于你有多少数据。如果没有太多，最容易手动输入标题和数字。如果很多，最好的方法是使用 javascript 或服务器端语言为您打印出行标题。

【讨论】：

使用 chrome 的开发工具，我发现该样式适用于 table 元素，但不适用于 td 元素。 td 元素上有 class="xl165" 类名，删除后允许显示 td 边框（内联边框左部分除外，该部分也必须从内联样式属性中删除）。简而言之，通过 javascript，可以将您的样式注入到已经存在的内联样式表中，然后从每个 td 标记中删除该类名和内联边框样式。需要在工作表框架中的所有选项卡上设置 onclick 才能调用此代码。
或者您可以自己修改xl165 类，只需使用他们为所有这些单元格提供的名称并在css中以您自己的方式设置它的样式......这样可能会不那么混乱
如果不是每个 td 标签上的单独内联边框样式，那将是一个更有效的解决方案。 ------ 我刚刚意识到在生成电子表格并将其导出到 html 后，我可能只是在服务器上为每个工作表页面将“border*:none”的字符串替换为“border: 1px solid #000” .当我通过 python 或其他方式搞乱它时，我不妨计算 tr 标签的数量，然后在单个 tr 标签中找到最大数量的 td 标签，并从那里生成行号和列标题。标题基本上以 10 到 26 为基数。
听起来是个不错的计划。我不知道您可以使用哪些武器，但是如果您使用的是 python，那么绝对可以使用它来获取行号。或者，如果您熟悉 jQuery，在每个之后附加一个带有迭代编号的会相当轻松。我想我没有明确说要删除那些内联边框样式。从长远来看，这对于您的标记的清洁和您自己的理智来说可能是一件好事！

【解决方案2】：

一个非常懒惰的解决方法是在保存为网页之前在 excel 中选择较大尺寸的边框线。不久前它困扰着我，这是我找到的修复程序，从那时起我就使用它，我维护了一个曲棍球池，在表格中导出每日球队统计数据和排名，使用这个技巧在 chrome 中渲染得很好。

【讨论】：

【解决方案3】：

另一种方法是访问您的谷歌驱动器，导入您的 xls 文件，然后将其下载为 html 文件。生成的网页在 Chrome 和 IE 中都能完美运行。

【讨论】：