search

S1SYPHOS / kirby-lingonberry

A Kirby port of the Wordpress theme 'Lingonberry'
https://twobrain.io/lingonberry
GNU General Public License v2.0
6 stars 2 forks source link

table alignment - unwanted behavior #20

Closed demlak closed 6 years ago

demlak commented 6 years ago

hi, i tried to generate some tables with alignment. i need several tables wich are aligned on cells, that are at the same size. In the following example all cells on the 3rd column are all the same size. i tried to align them to the right site. the cells on the 2nd column should now align on the right site. the collumn should have exactly all the same distance to the 3rd column, but they don't. The distance seems to depend on the width of the 2nd column/cell

example 1 markdown:

|Table Header 1|Table Header 2|Table Header 3|
|---|---:|---:|
|Division 1|Division 2|Division 3|
|Division 1|Division 2|Division 3|
|Division 1|Division 2|Division 3|

|Table Header 1|Table Header 2|Table Header 3|
|---|---:|---:|
|Division 1|Divisifdsgfdsgon 2|Division 3|
|Dividsadsadsadsadassion 1|Divisgfdsgfdsgsion 2|Division 3|
|Division 1|Divfdsgfdision 2|Division 3|

|Table Header 1|Table Header 2|Table Header 3|
|---|---:|---:|
|Division 1|Division 2|Division 3|
|Division 1|Divisfdsgfdsgion 2|Division 3|
|Divisdsadsadsadsadasdion 1|Divisfdsgfdggfdgfdgion 2|Division 3|

example 1 picture: example-mr

In the 2nd example i tried to align the 2nd column to the left, where all cells of the 1st colum are all the same size. a similar effect happens. again, the column alignment seem to depend on the column width.

example 2 markdown

|Table Header 1|Table Header 2|Table Header 3|
|:---|:---|---:|
|Division 1|Divisiodsafdsafdsn 2|Division 3|
|Division 1|Division 2|Divisiofdsafdsafdsn 3|
|Division 1|Division 2|Division 3|

|Table Header 1|Table Header 2|Table Header 3|
|:---|:---|---:|
|Division 1|Divisidsfdsfon 2|Division 3|
|Division 1|Divisfdsafdsfion 2|Division 3|
|Division 1|Division 2|Divisdsfdion 3|

|Table Header 1|Table Header 2|Table Header 3|
|:---|:---|---:|
|Division 1|Division 2|fdsf 3|
|Division 1|Division 2|Division 3|
|Division 1|Dividfsfdssion 2|Division 3|

example 2 picture: example-ml

Since i don't know if this is a problem on kirby itself or on the lingonberry theme, i just started in here, before i head over to the getkirby forum, if necessary.

thx in advance

S1SYPHOS commented 6 years ago

You are right insofar as alignment depends on content width. However, you may change this bevahiour with table-layout: fixed - for more information, see this excellent article on the subject, as well as its more general follow-up on CSS-Tricks.

Browser support is very nice, too.