how can I control table column widths when exporting to html?

Question

I would like to specify the width of each column in tables that are exported from an org mode file to html.

In terms of html I can think of two possible solutions,

(i) add class attributes to each column in the table, e.g.,

<th class="row-1 row-ID">ID</th>
<th class="row-2 row-name">Name</th>
<th class="row-3 row-job">Job</th>
<th class="row-4 row-email">Email<th>

in the html. And class selectors in the css:

.row-ID {
   width: 10%;
}
.row-name {
   width: 40%;
}
.row-job {
   width: 30%;
}
.row-email {
  width: 20%;
}

(ii) use the col tag, e.g., <col width="100px" />.

I would prefer (i).

I have not been able to generate the html for either of these solutions from my org file.

Answer 1

There doesn't seem to be any way to specify the column classes in the output that org-mode produces. I did find though that I am able to use nth-child to achieve what I need. You can add something like this to your .org file:

@@html:
<style>
table colgroup col:nth-child(1) {
    width: 10%;
}
table colgroup col:nth-child(2) {
    width: 40%;
}
table colgroup col:nth-child(3) {
    width: 30%;
}
table colgroup col:nth-child(4) {
    width: 20%;
}
</style>
@@

Or of course you can put this into an external .css file and tell org-mode to use that.