Markdown CSS Table header background color problem

BONSAI · September 18, 2021, 7:29pm

Hi, i have a problem with markdown css style. I get different results in DEVONthink 3 and DEVONthink To Go. In DEVONthink 3, the table is presented as expected. In DEVONthink To Go the header is displayed in a different color and it is not possible to change the header background color.

What can i do to change the table header background color in DEVONthink To Go?

Markdown document

<Style>
    table, td, th {background-color:red;}
</style>

<table>
    <tr>
        <th>
            NewHeader
        </th>
        <th>
            NewHeader
        </th>
    </tr>
    <tr>
        <td>
            NewRow
        </td>
        <td>
            NewRow
        </td>
    </tr>
    <tr>
        <td>
            NewRow
        </td>
        <td>
            NewRow
        </td>
    </tr>
</table>


| NewHeader | NewHeader |
|--|--|
| NewRow | NewRow |
| NewRow | NewRow |

MacOS DEVONthink 3.72

iOS DEVONthink To Go 3.2

BLUEFROG · September 18, 2021, 8:53pm

The internal stylesheet in DEVONthink and DEVONthink To Go aren’t the same. I’ll test to see if I can reproduce the same issue here.

On a side note: Why are you creating a Markdown document and putting an HTML table in it?

BONSAI · September 19, 2021, 6:01am

I use the markdown syntax wherever i can, and when the markdown reaches its limits, i use html with css. To make my markdown lists look a bit nicer, i use html with css. This way i can use my own icons and styles. For tables in this list objects i need html with css.
As a markdown editor on the Mac i use Microsoft Visual Studio Code, there you can create your own extension in which you can create snippets. So it is very easy to use the html code in markdown.
On the iPhone you can use the shortcuts app to copy and paste html code into DEVONthink To Go.

HTML CSS List example

<style>
    /* ———————————— List ———————————— */
    ul,
    ol {
        margin-bottom: 0.7em;
    }

    /* ———————————— BulletList ———————————— */
    ul {
        list-style: none;
        margin-left: -1.5em;
    }
    ul li::before {
        /* Add content: "\2022" "\25CF" "\2B24" is the CSS Code/unicode for a bullet */
        content: "\25CF";
        color: var(--text-header-color);
        font-weight: bold;
        font-size: 1.2em;
        display: inline-block;
        width: 1em;
        margin-left: -1em;
    }

    /* ———————————— SymbolList ———————————— */
    ul.symbollist, ul.tasklist {
        list-style: none;
        margin-left: 0em;
    }
    li.symbollistnone::before,
    li.symbollistnew::before,
    li.symbollistfix::before,
    li.symbollistchanged::before,
    li.symbollistissues::before,
    li.symbollistadd::before,
    li.symbollistdelete::before,
    li.unchecked::before,
    li.checked::before,
    li.deletetask::before {
        margin-left: -2.2em;
        margin-right: 1em;
        align-content: center;
        vertical-align: middle;
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
    }
    li.symbollistnone::before, li.unchecked::before {
        content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48ZyBpZD0iRGVsZXRlIj48L2c+PGcgaWQ9IkFkZCI+PC9nPjxnIGlkPSJLbm93bi1Jc3N1ZXMiIHNlcmlmOmlkPSJLbm93biBJc3N1ZXMiPjwvZz48ZyBpZD0iQ2hhbmdlZCI+PC9nPjxnIGlkPSJGaXgiPjwvZz48ZyBpZD0iTmV3Ij48L2c+PGcgaWQ9Ik5vbmUiPjxjaXJjbGUgY3g9IjgiIGN5PSI4IiByPSI4IiBzdHlsZT0iZmlsbDojN2Q3ZDdkOyIvPjxjaXJjbGUgY3g9IjgiIGN5PSI4IiByPSIyLjUiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PHBhdGggZD0iTTEwLjEyMSw0LjQ3OGwtNS42NTcsNS42NTdsMS40MTUsMS40MTRsNS42NTcsLTUuNjU3bC0xLjQxNSwtMS40MTRaIiBzdHlsZT0iZmlsbDojZmZmOyIvPjxwYXRoIGQ9Ik00LjQ2NCw1Ljg5Mmw1LjY1Nyw1LjY1N2wxLjQxNSwtMS40MTRsLTUuNjU3LC01LjY1N2wtMS40MTUsMS40MTRaIiBzdHlsZT0iZmlsbDojZmZmOyIvPjwvZz48L3N2Zz4=');
    }
    li.symbollistnew::before {
        content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48ZyBpZD0iRGVsZXRlIj48L2c+PGcgaWQ9IkFkZCI+PC9nPjxnIGlkPSJLbm93bi1Jc3N1ZXMiIHNlcmlmOmlkPSJLbm93biBJc3N1ZXMiPjwvZz48ZyBpZD0iQ2hhbmdlZCI+PC9nPjxnIGlkPSJGaXgiPjwvZz48ZyBpZD0iTmV3Ij48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iOCIgc3R5bGU9ImZpbGw6IzNjOWFmZTsiLz48cmVjdCB4PSI0IiB5PSI3IiB3aWR0aD0iOCIgaGVpZ2h0PSIyIiBzdHlsZT0iZmlsbDojZmZmOyIvPjxwYXRoIGQ9Ik03LDRsMCw4bDIsLTBsMCwtOGwtMiwtMFoiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PC9nPjxnIGlkPSJOb25lIj48L2c+PC9zdmc+');
    }
    li.symbollistfix::before, li.checked::before {
        content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48ZyBpZD0iRGVsZXRlIj48L2c+PGcgaWQ9IkFkZCI+PC9nPjxnIGlkPSJLbm93bi1Jc3N1ZXMiIHNlcmlmOmlkPSJLbm93biBJc3N1ZXMiPjwvZz48ZyBpZD0iQ2hhbmdlZCI+PC9nPjxnIGlkPSJGaXgiPjxjaXJjbGUgY3g9IjgiIGN5PSI4IiByPSI4IiBzdHlsZT0iZmlsbDojMmJkNzAwOyIvPjxwYXRoIGQ9Ik04LjE0NiwxMC40MjNsLTIuODEsLTIuODFsLTEuNDE0LDEuNDE1bDIuODEsMi44MDlsMS40MTQsLTEuNDE0WiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48cGF0aCBkPSJNMTAuNTg4LDUuMTcybC01LjI1Miw1LjI1MWwxLjQxNCwxLjQxNGw1LjI1MiwtNS4yNTFsLTEuNDE0LC0xLjQxNFoiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PC9nPjxnIGlkPSJOZXciPjwvZz48ZyBpZD0iTm9uZSI+PC9nPjwvc3ZnPg==');
    }
    li.symbollistchanged::before {
        content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48ZyBpZD0iRGVsZXRlIj48L2c+PGcgaWQ9IkFkZCI+PC9nPjxnIGlkPSJLbm93bi1Jc3N1ZXMiIHNlcmlmOmlkPSJLbm93biBJc3N1ZXMiPjwvZz48ZyBpZD0iQ2hhbmdlZCI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIHN0eWxlPSJmaWxsOiNmZjZhMDU7Ii8+PHBhdGggZD0iTTgsNi41ODZsLTMuNzA0LDMuNzA0bDEuNDE0LDEuNDE0bDMuNzA0LC0zLjcwNGwtMS40MTQsLTEuNDE0WiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48cGF0aCBkPSJNMTEuNzA0LDQuMjk2bC0wLjg3Niw1LjExOGwtNC4yNDIsLTQuMjQybDUuMTE4LC0wLjg3NloiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PC9nPjxnIGlkPSJGaXgiPjwvZz48ZyBpZD0iTmV3Ij48L2c+PGcgaWQ9Ik5vbmUiPjwvZz48L3N2Zz4=');
    }
    li.symbollistissues::before {
        content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48ZyBpZD0iRGVsZXRlIj48L2c+PGcgaWQ9IkFkZCI+PC9nPjxnIGlkPSJLbm93bi1Jc3N1ZXMiIHNlcmlmOmlkPSJLbm93biBJc3N1ZXMiPjxjaXJjbGUgY3g9IjgiIGN5PSI4IiByPSI4IiBzdHlsZT0iZmlsbDojOTMxMWZmOyIvPjxwYXRoIGQ9Ik05Ljk5OSw0LjUwMWwtNS45OTksNS45OTlsMS41LDEuNWw1Ljk5OSwtNS45OTlsLTEuNSwtMS41WiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48cGF0aCBkPSJNMTIsNi41MDJsLTIuNTAyLC0yLjUwMmwtMi4yNDksMi4yNDlsMi41MDIsMi41MDJsMi4yNDksLTIuMjQ5WiIgc3R5bGU9ImZpbGw6I2ZmZjsiLz48cGF0aCBkPSJNMTAuMDA2LDguNDk2bC0yLjUwMiwtMi41MDJsLTEuNzUxLDAuMjU0bDMuOTk5LDMuOTk5bDAuMjU0LC0xLjc1MVoiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PC9nPjxnIGlkPSJDaGFuZ2VkIj48L2c+PGcgaWQ9IkZpeCI+PC9nPjxnIGlkPSJOZXciPjwvZz48ZyBpZD0iTm9uZSI+PC9nPjwvc3ZnPg==');
    }
    li.symbollistadd::before {
        content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48ZyBpZD0iRGVsZXRlIj48L2c+PGcgaWQ9IkFkZCI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIHN0eWxlPSJmaWxsOiMyYmQ3MDA7Ii8+PHJlY3QgeD0iNCIgeT0iNy4wMTMiIHdpZHRoPSI4IiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PHBhdGggZD0iTTcsNC4wMTNsMCw4bDIsMGwwLC04bC0yLDBaIiBzdHlsZT0iZmlsbDojZmZmOyIvPjwvZz48ZyBpZD0iS25vd24tSXNzdWVzIiBzZXJpZjppZD0iS25vd24gSXNzdWVzIj48L2c+PGcgaWQ9IkNoYW5nZWQiPjwvZz48ZyBpZD0iRml4Ij48L2c+PGcgaWQ9Ik5ldyI+PC9nPjxnIGlkPSJOb25lIj48L2c+PC9zdmc+');
    }
    li.symbollistdelete::before, li.deletetask::before {
        content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48ZyBpZD0iRGVsZXRlIj48Y2lyY2xlIGN4PSI4IiBjeT0iOC4wMTMiIHI9IjgiIHN0eWxlPSJmaWxsOiNmMTE7Ii8+PHJlY3QgeD0iNCIgeT0iNy4wMTMiIHdpZHRoPSI4IiBoZWlnaHQ9IjIiIHN0eWxlPSJmaWxsOiNmZmY7Ii8+PC9nPjxnIGlkPSJBZGQiPjwvZz48ZyBpZD0iS25vd24tSXNzdWVzIiBzZXJpZjppZD0iS25vd24gSXNzdWVzIj48L2c+PGcgaWQ9IkNoYW5nZWQiPjwvZz48ZyBpZD0iRml4Ij48L2c+PGcgaWQ9Ik5ldyI+PC9nPjxnIGlkPSJOb25lIj48L2c+PC9zdmc+');
    }
</style>



# Changelog

<ul class="symbollist">
    <li class="symbollistnone">
        NewText
    </li>
    <li class="symbollistnew">
        NewText
    </li>
    <li class="symbollistadd">
        NewText
    </li>
    <li class="symbollistchanged">
        NewText
    </li>
    <li class="symbollistdelete">
        NewText
    </li>
    <li class="symbollistfix">
        NewText
    </li>
    <li class="symbollistissues">
        NewText
    </li>
</ul>

<br>

# Tasklist

<ul class="tasklist">
    <li class="checked">
    NewText
        <table>
            <tr>
                <th>
                    NewHeader
                </th>
                <th>
                    NewHeader
                </th>
            </tr>
            <tr>
                <td>
                    NewRow
                </td>
                <td>
                    NewRow
                </td>
            </tr>
        </table>
    </li>
    <li class="unchecked">
        NewText
    </li>
</ul>

[Edit]

I forgot to add the screenshots. For reasons unknown to me, not all icons are displayed in DEVONthink 3. If you use the css style in a css file and integrate it, there will be no display errors. I still have a screenshot of Microsoft Visual Studio Code there it works without any display errors.

DEVONThink 3.7.2

Microsoft Visual Studio Code

chrillek · September 19, 2021, 9:07am

I’d suggest to use external stylesheets rather than internal ones. Makes it easier to change the appearance for all documents if need be.
Also, I’m not sure why you’d use HTML tables if markdown provides for tables as well. You could style them as well, I guess.

As to why some of your SVG items are not displayed in DT: do you see them I’m a browser?
On a personal note: why do you even bother with markdown if what you really want is HTML with CSS?

BONSAI · September 20, 2021, 7:48pm

@chrillek this is just an example in which i am using HTML with CSS and is only part of the entire markdown file. As already mentioned, the icons are displayed correctly if you use the CSS styles in a CSS file and import it into the markdown files. This bug is not a problem for me because i use my CSS styles in a CSS file

BONSAI · September 28, 2021, 6:15pm

@BLUEFROG were you able to adjust the issue and find out how to change the header background color?

BLUEFROG · September 29, 2021, 3:24am

Not yet, but try using table th to set the color, not just th.

BONSAI · September 29, 2021, 5:21pm

@BLUEFROG thanks for your help, “table th” works very well

BLUEFROG · September 29, 2021, 6:47pm

You’re welcome.

Technically, the stylesheet shouldn’t require that specificity to target the table header, but it’s a simple enough workaround.

Cheers!