[BUG] Codeblock tables are not actually tables on mobile

[tjg23]

Background

I’ve been having an issue since the last update where my tables using the codeblock method were not being styled correctly. Several custom CSS rules were not being applied, but some were which was confusing. The biggest issue was that I had tables set to fill the line width in my theme (Border) which no longer worked.
I noticed this on my iPad, which is my primary device, but then when I opened Obsidian on my PC to inspect it with dev tools, they were styled properly. This was even true when I used the dev tools mobile emulation, so I was at a loss. Recently, a new plugin was released called vConsole which adds a simple dev console, including an HTML tree, to mobile, and I was able to find the cause

The Issue

In the Obsidian iPad app, tables using the codeblock syntax offered by this plugin are not rendered as a <table> element, but simply a <div> containing a <thead> and <tbody>. Some of my relevant CSS was written without a table specifier so it still worked, but anything that did include table in its target was not applied.

I rewrote my custom CSS and fixed most of the issues, but I have been unable to restore the table width. I’ve tried to write a new CSS rule to set the width to 100%, but nothing has worked. All I can do is look at the HTML structure to see what to target, but even with a dozen specifiers and !important rules, it has no effect on the width. Without a full-featured dev tools to see the values and what rules are being applied, this is very difficult to solve.

I didn’t think this would be an issue after I adjusted my CSS, but the fact that I can’t fix the width of these tables is frustrating. I don’t know why or how this happens or why it’s only on the iPad app. It’s only a minor cosmetic issue but I would greatly appreciate a fix

[tjg23]

I had a realization, and I was able to fix the width by adding the display: table rule to a snippet targeting .block-language-sheet#obsidian-sheets-parsed