Specify column width and row height for excel using html table

Question

I'm working on a project where I need to export a html table to excel sheet using jquery. I have the required plugins and all but what I'm unable to do is set column width when excel opens the file.

I've tried setting <th style="width:70px;"> and also set table-layout:fixed; width:100%; for the relavant tables. I've also tried <DefaultColumnWidth>1</DefaultColumnWidth> in WorkSheetOptions without success.

What I simply need is that all columns be of equal width and the row heights vary according to the cell contents. Is there any way I can achieve this? I could also work with other plugins which convert html table to excel but it needs to have options to set column widths and row heights. Any help is greatly appreciated.

Here is a sample table I'm working on:

<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
<head>
    <meta name=ProgId content=Excel.Sheet>
    <meta name=Generator content="Microsoft Excel 11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Hourly Summary Report</x:Name><x:WorksheetOptions><x:DefaultColumnWidth>16</x:DefaultColumnWidth><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head>
<body>
    <table style="table-layout:fixed; width:100%;"><thead>
    <tr>
        <th style="text-align:center; vertical-align:middle; word-wrap: break-word;">This sentence badly needs a word wrap</th>
        <th style="text-align:center; vertical-align:middle;">Industrial Robots</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td class="bg-black disabled color-palette" style="text-align:center; vertical-align:middle; font-weight:bold;">13 Jun 2017 12:00 AM - 13 Jun 2017 01:00 AM</td>
    </tr>
</tbody>
</table>

score 2 · Accepted Answer · answered Jun 28 '17 at 08:28

Turns out, excel freaks when provided with nested tables in html. So as soon as I removed the table tags, all styles started working normally with excel. And for the convenience of others who will view this answer, please note that it is necessary and sufficient to remove the <table>, </table> tag. Rest of the DOM works fine with excel.

Specify column width and row height for excel using html table

1 Answers1