Re: [O] Table column width and HTML export
Thanks for sharing
/Martin
From: Kaushal Modi [mailto:kaushal.m...@gmail.com]
Sent: 18. september 2018 20:25
To: Martin Dalgaard Villumsen
Cc: emacs-org list
Subject: Re: [O] Table column width and HTML export
On Tue, Sep 18, 2018 at 7:35 AM Martin Dalgaard Villumsen
mailto:mvillum...@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
/* 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;
}
#+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]
Re: [O] Table column width and HTML export
On Tue, Sep 18, 2018 at 7:35 AM Martin Dalgaard Villumsen <
mvillum...@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
/* 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;
}
#+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 --
/element+element/ selector]]
- [[https://www.w3schools.com/cssref/sel_firstchild.asp][CSS --
~:first-child~]]
- [[https://www.w3schools.com/cssref/sel_last-child.asp][CSS --
~:last-child~]]
- [[https://www.w3schools.com/cssref/sel_nth-child.asp][CSS --
~:nth-child()~]]
- [[https://www.w3schools.com/cssref/sel_nth-last-child.asp][CSS --
~:nth-last-child()~]]
=
Screenshot (see below/attached):
[image: image.png]
[O] Table column width and HTML export
>The org-* classes you mentioned can be easily overridden or used along with > >>the new classes, based on how the CSS rules are written. 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? /Martin From: Kaushal Modi [mailto:kaushal.m...@gmail.com] Sent: 18. september 2018 13:27 To: Martin Dalgaard Villumsen Cc: Emacs-orgmode@gnu.org Subject: Re: [O] Table column width and HTML export Hello, There seems to be quite a bit of confusion. On Tue, Sep 18, 2018, 6:51 AM Martin Dalgaard Villumsen mailto:mvillum...@health.sdu.dk>> wrote: I am not interested in editing the exported HTML file (conflicts the point of using org-mode) I did not say that HTML should be edited manually. I said that ox-html probably needs an update that inserts the col tag with user-specified col-classes. I can add a class to the tag with #+ATTR_HTML: :class my-table Correct. That class won't help here. You need a class that scopes the individual columns. But I don’t know how to add a new class to in org-mode; or how to define a custom column (one that is now , , ). Right, that needs to be investigated. Most likely, at the moment, we cannot set individual classes for each column. No point in CSS-restyling default class="org-center", class="org-left", etc. … this would affect columns in other tables That's a CSS problem. You can set a unique class for a table using the attr_html syntax you showed above and then set CSS rules only for that table using ".my-table td+td" and so on. The org-* classes you mentioned can be easily overridden or used along with the new classes, based on how the CSS rules are written.
Re: [O] Table column width and HTML export
Hello, There seems to be quite a bit of confusion. On Tue, Sep 18, 2018, 6:51 AM Martin Dalgaard Villumsen < mvillum...@health.sdu.dk> wrote: > I am not interested in editing the exported HTML file (conflicts the point > of using org-mode) > I did not say that HTML should be edited manually. I said that ox-html probably needs an update that inserts the col tag with user-specified col-classes. > I can add a class to the tag with > > #+ATTR_HTML: :class my-table > Correct. That class won't help here. You need a class that scopes the individual columns. > But I don’t know how to add a new class to in org-mode; or how to > define a custom column (one that is now , , ). > Right, that needs to be investigated. Most likely, at the moment, we cannot set individual classes for each column. > No point in CSS-restyling default class="org-center", class="org-left", > etc. … this would affect columns in other tables > That's a CSS problem. You can set a unique class for a table using the attr_html syntax you showed above and then set CSS rules only for that table using ".my-table td+td" and so on. The org-* classes you mentioned can be easily overridden or used along with the new classes, based on how the CSS rules are written. >
Re: [O] Table column width and HTML export
I am not interested in editing the exported HTML file (conflicts the point of using org-mode) I can add a class to the tag with #+ATTR_HTML: :class my-table But I don’t know how to add a new class to in org-mode; or how to define a custom column (one that is now , , ). No point in CSS-restyling default class="org-center", class="org-left", etc. … this would affect columns in other tables /Martin From: Kaushal Modi [mailto:kaushal.m...@gmail.com] Sent: 18. september 2018 12:31 To: Martin Dalgaard Villumsen Cc: Emacs-orgmode@gnu.org Subject: Re: [O] Table column width and HTML export On Tue, Sep 18, 2018, 3:38 AM Martin Dalgaard Villumsen mailto:mvillum...@health.sdu.dk>> wrote: How do I control the column width when exporting a table to HTML? I know how to control the width of the table, but not the width of its columns. For example, I want the width of column A to be 2 cm and the width of B to be 4 cm: | A | B | |+| | 11 | 12 | | 21 | 22 | Relative settings are also appreciated, A 33% and B 67% of total table width. Hello, This needs to be solved using CSS. See an example here: https://stackoverflow.com/questions/6253963/table-with-table-layout-fixed-and-how-to-make-one-column-wider In that two solutions are suggested in the selected answer. You should be able to implement the first way using the "td+td" CSS rule. For the second way using the "col" tag, I don't have the computer accessible right now, to check if ox-html can insert that tag. Even if it did add that tag, you would need to specify the class string for each column, and then use CSS to set the width of each column class. Right now, the first method seems to be the best?/fastest/easiest way forward.
Re: [O] Table column width and HTML export
On Tue, Sep 18, 2018, 3:38 AM Martin Dalgaard Villumsen < mvillum...@health.sdu.dk> wrote: > How do I control the column width when exporting a table to HTML? > > > > I know how to control the width of the table, but not the width of its > columns. For example, I want the width of column A to be 2 cm and the width > of B to be 4 cm: > > > > | A | B | > > |+| > > | 11 | 12 | > > | 21 | 22 | > > > > Relative settings are also appreciated, A 33% and B 67% of total table > width. > Hello, This needs to be solved using CSS. See an example here: https://stackoverflow.com/questions/6253963/table-with-table-layout-fixed-and-how-to-make-one-column-wider In that two solutions are suggested in the selected answer. You should be able to implement the first way using the "td+td" CSS rule. For the second way using the "col" tag, I don't have the computer accessible right now, to check if ox-html can insert that tag. Even if it did add that tag, you would need to specify the class string for each column, and then use CSS to set the width of each column class. Right now, the first method seems to be the best?/fastest/easiest way forward. >
Re: [O] Table column width and HTML export
On Tuesday, 18 Sep 2018 at 07:37, Martin Dalgaard Villumsen wrote: > How do I control the column width when exporting a table to HTML? Looking at the code (ox-html.el), it doesn't look like this is possible. Maybe somebody can prove me wrong, however. The code I see allows for setting the alignment of columns but not the width. -- Eric S Fraga via Emacs 27.0.50, Org release_9.1.13-753-g2ec5d3
[O] Table column width and HTML export
How do I control the column width when exporting a table to HTML? I know how to control the width of the table, but not the width of its columns. For example, I want the width of column A to be 2 cm and the width of B to be 4 cm: | A | B | |+| | 11 | 12 | | 21 | 22 | Relative settings are also appreciated, A 33% and B 67% of total table width. Thanks for reading, Martin
