MS Excel to HTML gridlines missing in Google Chrome

Question

I'm trying to convert from excel spreadsheet (.xls) to html via MS Excel 2010, but I'm wanting to keep the gridlines. So I'm highlighting all cells -> format cells -> outline and inside border presets, normal border, black color, and then doing the export. Viewed with IE and Firefox, the borders are there. However, when viewed with chrome, the borders are gone and I instead see style="border-left: none;" inside of each td tag.

The purpose of this is to make an excel spreadsheet preview for a webpage, and it's looking like the export-to-html route is probably the easiest. Does anyone know of a better route?

I'm thinking my only solution may be to just have javascript check specifically for chrome and edit the border left/right/top/bottom styles on all the td tags. Is there something I'm missing?

Also, is there a way to keep the row numbers and column letter headers in the html version?

alquatoun alquatoun · Accepted Answer · 2011-06-20T20:41:25

You can do a find/replace for all the instances where the source code reads border-left:none, border:none, etc... then use css styles to make sure the gridlines stay with the data. Assuming it is exported as a table, use

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

(format to your own taste and liking)

As for the row numbers and column headers, it depends how much data you have. If there's not much, it would be easiest to hand-type in the headings and numbers. If it's a lot, the best way would be to use javascript or a server-side language to print out the row headings for you.

MS Excel to HTML gridlines missing in Google Chrome

3 Answers