vrimar / construct-ui

A Mithril.js UI library
https://vrimar.github.io/construct-ui
MIT License
287 stars 24 forks source link

<th> used in column context in Table fails to render last row bottom border on <td> #14

Closed angrytongan closed 4 years ago

angrytongan commented 4 years ago

When <th> is used in a column context, the final row bottom border does not display underneath <td> elements. When using <th> in a row context, or with { bordered: true }, it does render correctly.

const {
    Table,

} = CUI;

const TableRendering = {
    view: () => {
        return m('', [
            m('', [
                m('p', m.trust('Table with <i>th</i> in top row')),
                m(Table, [
                    m('tr', [
                        m('th', 'heading row 1 column 1'),
                        m('th', 'heading row 1 column 2'),
                        m('th', 'heading row 1 column 3'),
                    ]),
                    m('tr', [
                        m('td', 'data row 2 column 1'),
                        m('td', 'data row 2 column 2'),
                        m('td', 'data row 2 column 3'),
                    ]),
                    m('tr', [
                        m('td', 'data row 3 column 1'),
                        m('td', 'data row 3 column 2'),
                        m('td', 'data row 3 column 3'),
                    ]),
                ]),
            ]),

            m('', [
                m('p', m.trust('Table with <i>th</i> in first column')),
                m(Table, [
                    m('tr', [
                        m('th', 'heading row 1 column 1'),
                        m('td', 'data row 1 column 2'),
                        m('td', 'data row 1 column 3'),
                    ]),
                    m('tr', [
                        m('th', 'heading row 2 column 1'),
                        m('td', 'data row 2 column 2'),
                        m('td', 'data row 2 column 3'),
                    ]),
                    m('tr', [
                        m('th', 'heading row 3 column 1'),
                        m('td', 'data row 3 column 2'),
                        m('td', 'data row 3 column 3'),
                    ]),
                ]),
            ]),

            m('', [
                m('p', m.trust('Table with <i>th</i> in second column')),
                m(Table, [
                    m('tr', [
                        m('td', 'data row 1 column 1'),
                        m('th', 'heading row 1 column 2'),
                        m('td', 'data row 1 column 3'),
                    ]),
                    m('tr', [
                        m('td', 'data row 2 column 1'),
                        m('th', 'heading row 2 column 2'),
                        m('td', 'data row 2 column 3'),
                    ]),
                    m('tr', [
                        m('td', 'data row 3 column 1'),
                        m('th', 'heading row 3 column 2'),
                        m('td', 'data row 3 column 3'),
                    ]),
                ]),
            ]),
        ]);
    },
};

document.addEventListener('DOMContentLoaded', () => {
    m.route(document.body, '/', {
        '/': TableRendering
    });
});
vrimar commented 4 years ago

Could you explain a bit further? This is what I'm seeing on latest Chrome Mac OS.

Capture

angrytongan commented 4 years ago

Latest Chrome on Mac OS X here. I'm running off the 1.0.0 branch.

Screen Shot 2020-03-17 at 10 21 41 am

vrimar commented 4 years ago

Fixed in v0.2.4.