Table display is inconsistent between modes and tabs (HTML table with CSS snippet)

[Poseidonic]

What I’m trying to do

I want to build a custom table, so I wrote the HTML code and the CSS snippet to do so. But the result is inconsistent:

• In view-mode, I have a table that doesn’t look like what I asked for.
• In editor-mode (not source-mode), I have the table I asked for (but only when it is displayed on a second tab).

I don’t understand why the table is not the same on both tabs, nor in both modes.

Question to the Forum

How can I make sure that my table is consistently displayed like the right tab table? (see screenshot)

In other words: How can I make sure that Obsidian displays the table from the editor-mode (see right tab on the screenshot) onto the view-mode (see left tab on the screenshot)?

Attachments (HTML code)

<table border="1px solid black">
<caption>Caption table</caption>
  <tbody>
  <thead><tr><th>Left thead</th><th>Right thead</th></tr></thead>
      <tr><td>Left cell</td>
      <td>Right cell</td></tr>
    <tr><td>Cell 1</td>
      <td>Text 1</td></tr>
    <tr><td>Cell 2</td>
      <td>Text 2</td></tr>
      <tr><td>Cell 3</td>
      <td>Text 3</td></tr>
    <tr><td class=cell-highlight>Cell 4 highlighted</td>
      <td>Text 4</td></tr>
  </tbody>
</table>

Attachments (CSS snippet)

table {
  border: 1px solid black;
}

caption {
  font-weight: bold;
  font-size: 24px;
  text-align: left;
  color: #333;
  margin-bottom: 14px;
}

th, td {
  border-collapse: collapse;
  padding: 8px;
}

thead th {
  width: 25%;
  background-color: #666666;
  color: white;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 2%;
}

tbody tr:nth-child(odd) {
  background-color: #fff;
}

tbody tr:nth-child(even) {
  background-color: #eee;
}

tbody th {
  background-color: #d7e3ee;
  color: #fff;
  text-align: left;
}

tbody tr:nth-child(even) th {
  background-color: #b8cde0;
}

.cell-highlight {
  background-color: #dfc76c;
  font-weight: bold;
}

Other info

I have a custom ITS Theme turned on, but the exact same issue occurs when I put back the Default Theme, so I don’t think the theme is important for the solution.

[holroy]

First of all, your html markup is slightly skewed as you’ve contained the <thead> within the <tbody> section. This should be:

<table>
  <caption> ... </captrion>
  <thead>
    <th> ... </th><th> ... </th>
  </thead>
  <tbody>
    <tr> ... </tr> <tr> ... </tr>
  </tbody>
</table>

This would most likely simplify and correct some of your CSS which migth be interpreted wrongly by the different engines for live preview and reading mode.

Secondly, I’m not sure why you’re even using an html table, as you should be able to do most of this styling using pure markdown tables (that is, if you use a little bit of trickery including some element to tag the table/cells ). Using pure markdown would also allow for links and other markdown to be used within the table, as Obsidian disallows markdown with html tables by choice.

Here is the full view with source mode on the top, live preview on the lower left, and reading mode on the lower right:

I’ve used #T to mark the table in its entirety, and then #high within any given cell to highlight that cell. The trick to getting this to work is to use a CSS selector like: .f74636 table:has(a[href="#T"]), where I used cssclasses: f74636 to limit to just this one note in my test vault, so that part can be deleted from the ruleset unless you want to limit this to particular notes, and more importantly I use the :has(a[href="#T"]) to check whether the <table> has a link element with the value #T. Note that :has() checks whether something below it has that condition without actually targeting that condition.

Full CSS for the example

Here are the full CSS used to style this example:

/* Hide the #T and #high tags */
.f74636 table a[href="#high"],
.f74636 table a[href="#T"] {
  display: none;
}


/* Do changes to our marked table */
.f74636 table:has(a[href="#T"]) {
  
  border: 1px solid black;

  & th, & td {
    border-collapse: collapse;
    padding: 8px;
  }

  & thead th {
    width: 25%;
    background-color: #666666;
    color: #fff;
    text-align: left;
    font-size: 0.875 rem;
    text-transform: uppercase;
    letter-spacing: 2%;
  }

  & tbody tr:nth-child(even) {
    background-color: #eee;
  }

  & tbody tr:nth-child(odd) {
    background-color: #fff;
  }

  & td:has(a[href="#high"]) {
    background-color: #dfc76c;
    font-weight: bold;
  }
}

This mostly matches your CSS alteration, but you get the gist of how to change the various elements. In addition to your stuff I’ve removed the tags #T and #high so that they don’t clutter the visual appearance of the table. You could of course choose other names/icons to your liking. Also note how most the CSS is within the table select clause, and using & something to target the table with something underneath.

The only difference between live preview and reading mode as I can see, is that live preview doesn’t seem to respect the width: 25%, and I’m not quite sure why. It can surely be figured out with some more digging and styling.

[Poseidonic]

Thanks very much holroy for your detailed answer!!

I was using HTML / CSS precisely because I did not find a way to make what you just showed me in Markdown. So I really appreciate you took the time to write down everything. It’s definitely a game changer for Obsidian use! Have a nice day