It is because Dia sets the sizes and content differently than DiaNone and DiaEmpty. DiaNone and DiaEmpty have a table. Each cell is provided a content div and then the content is put into the div. The widths are set by setting the widths of the divs. Dia on the other hand skips the content divs and places the content directly into the table cells. Dia then sets the widths of the cells themselves. The difference in spacing is because of 2 key impacts.

First, the cells in all 3 templates have 1px padding. However, when the width is set on the cell itself, that padding counts towards the width while it does not count towards the width when using the content divs. Put another way, for Dia, cell width = cell set width. However, for DiaEmpty and DiaNone, cell width = div set width + 2 * cell padding width. This difference currently leads to a 2px difference in width per column. With 2 columns, it results in a table width difference of 4px.

Second, the divs used for the text in DiaNone and DiaEmpty have left margins of 12px. This adds an additional 12px of empty space between the text and the edge of the table cell. The equivalent for Dia would be if the left padding were changed from 1px to 13px. The difference in width contributed to the table is straightforward, 12px.

Adding these 2 things together, we get a table width difference of 16px (4px for the padding + 12px for the margin). If you check the width of Dia versus DiaNone and DiaEmpty, you will see that is exactly the difference in the total widths of the tables.

I was trying to write a similar explanation, but failed to break it down in an understandable way and gave up. :D

Anyway, solutions:

Best solution:

Don't use tables for design. Use divs. Would be a lot of work though.

Second best solution:

Rewrite your DiaNone and DiaEmpty, eliminate the divs, and make it use the same classes and syntax as the Module is using instead:

DiaNone:

{| class="dia" style="background-color: rgba(255, 255, 255, 0.58);"
| class="dia-image" rowspan="2" | [[File:DiaZZUnknown.png|80px|link={{{link|{{{3|{{#invoke:code/en|code|{{{character|{{{1|Template:Dia}}}}}}|link}}}}}}}}]]
| class="dia-name" | {{#ifeq:{{{3|}}}||{{#invoke:Code|jp|{{{character|{{{1|''不明''}}}}}}}}|{{{3}}}}}
|-
| class="dia-text" | {{{2|''セリフ不明''}}}
|}

Result:

DiaEmpty:

{| class="dia" style="background-color: rgba(255, 255, 255, 0.58);"
| class="dia-text" | {{{dialogue|{{{1}}}}}}
|}

Result:

Quickest (but NOT best) solution:

In your Common.css, change the width for .dia from 500px to 516px

Addendum:

I think Andrewds explanation may be incorrect at one point:

The 12 px margin applies to the module version as well, but is defined in Common.css. However, 10px of the gap we see in DiaNone seems to come from this discrepancy that is not in the module and the css:

If this part is removed, there is a 6px gap left. Not sure where the missing 2 px come from (the explanation for the 4 px seem to make sense to me).

In the DiaEmpty template however, this seems to cause the cap:

Removing this eliminates the gap fully here.

Note:

The above solution(s) still apply.

This is just to try to understand what is happening and why.

@Andrewds1021 @Oot42

Thanks for the help, the widths are now consistent. However, I'd also like it if the three templates on the Japanese wiki had the same width as their counterparts in the English wiki. How could this be done?

"I'd also like it if the three templates on the Japanese wiki had the same width as their counterparts in the English wiki"

They do have the same width?

(surprisingly, to be honest, as the english wiki is not using the module, and also not the css classes, but what looks like the same inline styles you just removed on the japanese one... *confused*)

o_O

I didn't realize that, probably because of the cache