gecko gecko - 3 months ago 7
HTML Question

Convert fixed HTML table to relative table - keeping dimensions

I'm working on a project to create PDF files on basis of HTML and CSS. We're using the Antenna House Formatter to generate the PDF files.
The HTML files are exported out of a content management system. Unfortunately we use lots of tables in our PDF files (Technical Documentation). In the content management system we can only give fixed width to the table columns. An exported HTML table looks like this:

<table data-ait-rows="4" data-ait-cols="3" data-ait-width="4818" style="width:85mm;">
<tr style="height:5.9mm;" data-ait-rowheight="333">
<td data-ait-width="850" data-ait-bordercolors="65793" style="width:15mm;border-width:0pt;border-color:#010101;">
<p class="basestyle" data-ait-style_id="8092" data-ait-stylename="Base style" data-ait-rs="0" data-ait-list="4" data-ait-level="1" data-ait-format="">Signalwort</p>
</td>
<td data-ait-width="1984" data-ait-bordercolors="65793" style="width:35mm;border-width:0pt;border-color:#010101;">
<p class="basestyle" data-ait-style_id="8092" data-ait-stylename="Base style" data-ait-rs="0" data-ait-list="4" data-ait-level="1" data-ait-format="">Eintrittswahrscheinlichkeit</p>
</td>
<td data-ait-width="1984" data-ait-bordercolors="65793" style="width:35mm;border-width:0pt;border-color:#010101;">
<p class="basestyle" data-ait-style_id="8092" data-ait-stylename="Base style" data-ait-rs="0" data-ait-list="4" data-ait-level="1" data-ait-format="">Schwere der Gefahr bei Missachtung</p>
</td>
</tr>
...
</table>


Is it possible to convert the fixed width of the table (85mm) and the fixed column widths (15mm/35mm/35mm) into percentage values with keeping the dimensions?
Technical writers set the table width per drag and drop in the content management system. Those values are taken in the HTML file. The aim is to transform their set proportions automatically in percentage.

I thought I read a little time ago about such a way but after some hours of searching I couldn't find anything...If someone has an idea please let me know!

best regards, david

Answer

After trying different approaches it seems to be pretty easy. For my use case following solution works just fine:

table {table-layout: auto !important;}
td {width: auto ! important;}
tr {width: auto ! important;}