Table cells in live preview mode contain a leading space character which can cause unexpected wrapping problems in reader mode depending on custom CSS styles.
Wrong Layout (screenshot):
Expected Layout (screenshot):
Source table:
| Header1 | Header2 | Header3 |
| ------- | ------- | ------- |
| Value1 | Value2 | Value3 |
CSS Formatting Snippet (the reason the problem was discovered):
table {
width: 100% !important;
}
td:last-child {
width: 100%;
}
Generated HTML. Note the space at teh beginning of each <p> tag which causes the problem in the first screenshot.
<table id="obsidian-sheets-parsed">
<thead>
<tr>
<th class="" row-index="0" col-index="0"><p> Header1</p></th>
<th class="" row-index="0" col-index="1"><p> Header2</p></th>
<th class="" row-index="0" col-index="2"><p> Header3</p></th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr>
<td class="" row-index="2" col-index="0"><p> Value1</p></td>
<td class="" row-index="2" col-index="1"><p> Value2</p></td>
<td class="" row-index="2" col-index="2"><p> Value3</p></td>
</tr>
</tbody>
</table>
Note that simply disabling wrapping for table cells is not an option as some of these cells have text which should wrap.