[BUG] Missing style for basic tables in markdown rendering
Describe the bug
When rendering tables in a markdown document e.g. in an OpenSearch Dashboards' notebook, the table does not have any CSS on top of the CSS reset, making it barely readable: all data is cluttered as there is no space between fields, making it hard to see where a column ends and the next one starts.
To Reproduce Steps to reproduce the behavior:
- Go to 'Observability', 'Notebook'
- Create a Notebook
- Add a paragraph
- Add this sample content:
%md
Foo
| Mesure | Avant | Après | Ratio |
|--------------------|---------|--------|-------|
| Backup incrémental | 3mn | 20mn | × 7 |
| Backup complet | 1h | 8h | × 8 |
| Débit des backups | 380kB/s | 62kB/s | ÷ 6 |
Bar
Expected behavior
Columns should be clearly separated, and there should be spacing above and bellow the table.
Screenshots
Current rendering of the above example (note the missing spacing between cells and after the table):
Adding some CSS can help, as an experiment I added this style to my browser to do some testing:
.euiText table {
border-top: 2px solid #000;
border-bottom: 2px solid #000;
margin: 1em auto;
}
.euiText table th {
border-bottom: 1px solid #000;
text-align: left;
}
.euiText table th, .euiText table td {
padding: 0 1em;
}
Host/Environment (please complete the following information):
- OUI Version: 1.3.0 I guess (what ships with the latest OSD)
- OSD Version (if applicable): 2.11.1
- OS: n/a
- Browser and version n/a (Firefox)
@smortex want to PR a fix?
Unfortunately I am not versed in web development and fail to understand where I should begin to look to get started. If someone can point me to the right file / location to add this, and the methodology to make sure this has the expected result, that would be awesome!