Closed angrytongan closed 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.
<th>
<td>
{ bordered: true }
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 }); });
Could you explain a bit further? This is what I'm seeing on latest Chrome Mac OS.
Latest Chrome on Mac OS X here. I'm running off the 1.0.0 branch.
Fixed in v0.2.4.
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.