Closed
Description
Describe the bug:
When rendering html <table> element, the text-align CSS property is not respected.
I've tried with CSS in html:
td { text-align: right; }
and also with style override:
Html(
data: ...
style: {
'td': Style(textAlign: TextAlign.right),
},
);
also tried 3.0.0-alpha.2 version with the following renderer registered, but html is blank in this case
customRenders: {
tableMatcher(): tableRender(),
}
HTML to reproduce the issue:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
border: 0.5px solid grey;
}
td, th {
border: 0.5px solid grey;
padding: 5px;
}
td {
text-align: right;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td>
<tr><td>5</td><td>0.088</td>
<tr><td>6</td><td>1.046</td>
<tr><td>10</td><td>162</td>
<tr><td>11</td><td>2406</td>
<tr><td>14</td><td>94</td>
</table>
</body>
</html>
Html widget configuration:
No customization, just plain Html(data: html);
Expected behavior:
Expected to see all td elements aligned to the right, but they all are left-aligned.
Screenshots:
n/a
Device details and Flutter/Dart/flutter_html versions:
- Flutter version 2.10.4
- Dart version 2.16.2
- flutter_html: ^2.2.1 and flutter_html: ^3.0.0-alpha.2