Re: Table column width and HTML export

[Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk>]

[-- Attachment #1.1: Type: text/plain, Size: 2621 bytes --]

Thanks for sharing

/Martin

From: Kaushal Modi [mailto:kaushal.modi@gmail.com]
Sent: 18. september 2018 20:25
To: Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk>
Cc: emacs-org list <Emacs-orgmode@gnu.org>
Subject: Re: [O] Table column width and HTML export

On Tue, Sep 18, 2018 at 7:35 AM Martin Dalgaard Villumsen <mvillumsen@health.sdu.dk<mailto:mvillumsen@health.sdu.dk>> wrote:
>
> How do you in org-mode override/identify the column-class for a single column when you have multiple columns of the same type in the same table?

As I said, you can do everything using CSS and the existing ox-html version.

Here's an example:

=====
#+title: Specify widths different for different table columns in HTML export
#+author: Kaushal Modi

#+begin_export html
<style>
/* First column */
table.foo td:first-child {
  width: 200px;
}
/* Second column */
table.foo td:nth-child(2) {
  width: auto;
}
/* Last column */
table.foo td:last-child {
  width: 400px;
}
</style>
#+end_export

The column widths in below table will stay at default.

|----------+----------+----------|
| Header 1 | Header 2 | Header 3 |
|----------+----------+----------|
| abc      | def      | ghi      |
| jkl      | mno      | pqr      |
| stu      | vwx      | yz       |
|----------+----------+----------|

Below, the left-most column will be 200px wide and the right-most will
be 400px wide. The center column will stay at default width.

#+attr_html: :class foo
|----------+----------+----------|
| Header 1 | Header 2 | Header 3 |
|----------+----------+----------|
| abc      | def      | ghi      |
| jkl      | mno      | pqr      |
| stu      | vwx      | yz       |
|----------+----------+----------|
* CSS References
- https://stackoverflow.com/a/6254367/1219634
- [[https://www.w3schools.com/cssref/sel_element_pluss.asp][CSS<https://www.w3schools.com/cssref/sel_element_pluss.asp%5d%5bCSS> -- /element+element/ selector]]
- [[https://www.w3schools.com/cssref/sel_firstchild.asp][CSS<https://www.w3schools.com/cssref/sel_firstchild.asp%5d%5bCSS> -- ~:first-child~]]
- [[https://www.w3schools.com/cssref/sel_last-child.asp][CSS<https://www.w3schools.com/cssref/sel_last-child.asp%5d%5bCSS> -- ~:last-child~]]
- [[https://www.w3schools.com/cssref/sel_nth-child.asp][CSS<https://www.w3schools.com/cssref/sel_nth-child.asp%5d%5bCSS> -- ~:nth-child()~]]
- [[https://www.w3schools.com/cssref/sel_nth-last-child.asp][CSS<https://www.w3schools.com/cssref/sel_nth-last-child.asp%5d%5bCSS> -- ~:nth-last-child()~]]
=====

Screenshot (see below/attached):

[image.png]

[-- Attachment #1.2: Type: text/html, Size: 6258 bytes --]

[-- Attachment #2: image001.jpg --]
[-- Type: image/jpeg, Size: 8640 bytes --]