I’m designing a D&D character sheet in Obsidian and using a custom CSS snippet to float an infobox callout to the right. However, the table inside the callout behaves unexpectedly:
- In Edit Mode, the table appears broken — the cells/boxes are missing.
- In Live Preview / Reading Mode, the table does not render at all.
- The last row sometimes appears empty or out of order.
I’ve double-checked the Markdown and CSS, but it still does not work.
Css used
/* Container styling */
.character-wiki {
overflow: auto;
padding-right: 10px;
}
/* Float the infobox callout to the right */
.character-wiki .callout[data-callout=“infobox”] {
float: right;
width: 300px;
margin-left: 20px;
margin-bottom: 20px;
background: var(–background-tertiary);
border-radius: 8px;
padding: 10px;
}
/* Style images inside the infobox */
.character-wiki .callout[data-callout=“infobox”] img {
width: 100%;
border-radius: 6px;
}
/* Ensure the infobox heading looks clean */
.character-wiki .callout[data-callout=“infobox”] .callout-title {
font-weight: bold;
text-align: center;
}
/* Make sure text wraps properly around the infobox */
.character-wiki p,
.character-wiki h1,
.character-wiki h2,
.character-wiki h3,
.character-wiki h4,
.character-wiki ul,
.character-wiki ol,
.character-wiki table {
max-width: 100%;
}
Obsidan mark downd used
[!infobox]
![[Masamune.png|200]]Name: Masamune Theodoric Ignatius von Silverwind‑Dämmerstahl I
Race: Frost Elf
Class: Gunner
Lv: 2Stats
Stat Score Mod Save Prof STR 9 -1 -1 DEX 19 +4 +6 CON 12 +1 +1 INT 14 +2 +2 WIS 16 +3 +3 CHA 14 +2 +4
edeting view
Live view
