<th> used in column context in Table fails to render last row bottom border on <td>
angrytongan opened this issue · 3 comments
angrytongan commented
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
angrytongan commented
vrimar commented
Fixed in v0.2.4.