Tables are not centered in 2.1.4

[HelAu007]

Hello
We just upgraded from 2.0.x to 2.1.4.
Overall its a great improvement, thanks !!!
In the old version, tables could be centered, now these are all shown at the left
Regards
Helmut

[Sir Osis of Liver]

Screenshot?

[Aleksi "Lex" Kilpinen]

Default:

This is a table.

R1C1000	R1C2000	R1C3000
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

Here ends said table.

Centered:

This is a table.

R1C1000	R1C2000	R1C3000
R2C1	R2C2	R2C3
R3C1	R3C2	R3C3

Here ends said table.

I assume you were able to actually center the table, as now it seems to only center the contents within the table?
I'm not sure what has changed, but it would make sense to center the whole table if you wrap it in center tags.

Calling this a possible bug, moved to bug reports.

[HelAu007]

Exactly, and the funny thing, on a mobile its right aligned, on a PC left aligned.

Code Select Expand

[center]This is a centered text above a table
[table][tr][td]A1[/td]
[td]B1[/td]
[/tr]
[tr][td]A2[/td]
[td]B2[/td]
[/tr]
[/table]
[/center]And I have attached screenshots from the preview on 2.1.4 and an older one

[Sir Osis of Liver]

Table is centered in 2.0, not in 2.1.  It's a bug.

[Diego Andrés]

Is it supposed to look like this?
You cannot view this attachment.

Should be easy to fix.

Code Select Expand

.centertext table {
  margin-inline: auto;
}

[Aleksi "Lex" Kilpinen]

I think I would actually need to test and see how the table, versus the table contents, acted in different situations on 2.0, but before that at least that seems better than it is now.

[HelAu007]

Is it supposed to look like this?
You cannot view this attachment.

Should be easy to fix.

Code Select Expand

.centertext table {
  margin-inline: auto;
}

Yes its supposed to look like this.
What exactly can I do to check this ?

[Kindred]

modify your index.css

[Sir Osis of Liver]

You can't center a table in 2.1 with bbc tags.  This doesn't work either -

Code Select Expand


[center][table][tr][td]A1[/td]
[td]B1[/td]
[/tr]
[tr][td]A2[/td]
[td]B2[/td]
[/tr]
[/table][/center]



A1	B1
A2	B2

[Antechinus]

No, it wouldn't. Tables are a block level element, and text-align only works on inline elements. Use margin: 0 auto; instead. If that does not exist, make a BBC tag for it (should be a no brainer).

[Sir Osis of Liver]

Well, that's really the point.  It should work with default tags in reply editor, but it doesn't.  You can work around it, so can I, but shouldn't be necessary for members to mess with it.

[Antechinus]

Yes, but I'm thinking of the easiest fix for it.

In practice you need to do two things: centering inline elements (text-align: center;) because inline elements cannot have a margin set, and centering block level elements (margin : 0 auto;) because text-align doesn't work on them.

The easiest way to do it all with one tag is probably to make the centertext tag create the usual div (with text-align: center;) with another div inside it (set to display: inline-block;) and the content of the tag goes inside the second div. That way it doesn't matter if the content is an inline element or a block level element. A div is a valid wrapper for both, and if set to inline-block it will shrink to the width of the content, and it will accept text-align: center; and behave itself.

[Chen Zhen]

I never looked at BBC tables in 2.1 until this thread but shouldn't it be updated to use div tables?
Also if the tables are given 100% width then it centers.

[Kindred]

No tables are actually tables,  not divs

[live627]

why does it not use the center tag? and why delve deeper into divitus?

[Antechinus]

why does it not use the center tag?

I explained that already. The text-align: center; doesn't work on block level elements, and a table is a block level element. However, the fix I suggested will work for tables too. I tested it live. It works. It works if you put a table in the inner (second) div, and it works if you put a third div (ie: display: block;) inside the second div.

In both cases the inner div shrinks to the width of the target element's content, and the whole kaboodle then behaves when it is told to use text-align: center;

Which is the result you want, yes?

In practice you need to do two things: centering inline elements (text-align: center;) because inline elements cannot have a margin set, and centering block level elements (margin : 0 auto;) because text-align doesn't work on them.

The easiest way to do it all with one tag is probably to make the centertext tag create the usual div (with text-align: center;) with another div inside it (set to display: inline-block;) and the content of the tag goes inside the second div. That way it doesn't matter if the content is an inline element or a block level element. A div is a valid wrapper for both, and if set to inline-block it will shrink to the width of the content, and it will accept text-align: center; and behave itself.

[Sir Osis of Liver]

It works in 2.0, why not in 2.1?

[Antechinus]

Probably because 2.0 used the old (now-deprecated) HTML center tag. It's not a problem though. Just change the tag markup to add the extra div. It takes longer to talk about it than it would take to do it.

[live627]

C'mon, man!  This is Simple Machines, where we argue all day and get nothing done !


Shame that it's deprecated. I really like expressive markup.