improve table style

dotneet · dotneet · commit 48bbeb9761bd · 2019-10-25T15:13:52.000+09:00
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -43,13 +43,14 @@ const htmlData = """
       </p>
       <table>
       <colgroup>
-        <col width="70%" />
+        <col width="50%" />
+        <col width="25%" />
+        <col width="25%" />
       </colgroup>
       <thead>
       <tr><th>One</th><th>Two</th><th>Three</th></tr>
       </thead>
       <tbody>
-      <tr><td><b>Data</b></td><td>Data</td><td>Data</td></tr>
       <tr>
         <td>Data</td><td>Data</td><td>Data</td>
       </tr>
@@ -124,6 +125,20 @@ class _MyHomePageState extends State<MyHomePage> {
                     "#whitespace": Style(
                       backgroundColor: Colors.purple,
                     ),
+                    "table": Style(
+                      backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee)
+                    ),
+                    "tr": Style(
+                      border: Border(bottom: BorderSide(color: Colors.grey))
+                    ),
+                    "th": Style(
+                      padding: EdgeInsets.all(6),
+                      backgroundColor: Colors.grey
+                    ),
+                    "td": Style(
+                      padding: EdgeInsets.all(6),
+                      backgroundColor: Colors.transparent
+                    )
                   },
                   customRender: {
                     "flutter": (RenderContext context, Widget child, attributes) {
diff --git a/lib/src/layout_element.dart b/lib/src/layout_element.dart
@@ -42,22 +42,25 @@ class TableLayoutElement extends LayoutElement {
       });
     }).expand((i) => i).toList().asMap();
 
-    return Table(
-      columnWidths: colWidths,
-      children: children
-          .map((c) {
+    return Container(
+        decoration: BoxDecoration(
+          color: style.backgroundColor
+        ),
+        child: Table(
+          columnWidths: colWidths,
+          children: children.map((c) {
             if (c is TableSectionLayoutElement) {
               return c.toTableRows(context);
             }
             return null;
           })
-          .where((t) {
+              .where((t) {
             return t != null;
           })
           .toList()
           .expand((i) => i)
           .toList(),
-    );
+        ));
   }
 }
 
@@ -98,9 +101,18 @@ class TableRowLayoutElement extends LayoutElement {
 
   TableRow toTableRow(RenderContext context) {
     return TableRow(
+      decoration: BoxDecoration(
+        border: style.border,
+      ),
         children: children.map((c) {
           if (c is StyledElement && c.name == 'td' || c.name == 'th') {
-            return RichText(text: context.parser.parseTree(context, c));
+            return TableCell(
+                child: Container(
+                  padding: c.style.padding,
+                  decoration: BoxDecoration(
+                    color: c.style.backgroundColor
+                  ),
+                  child: RichText(text: context.parser.parseTree(context, c))));
           }
           return null;
     }).where((c) => c != null).toList());
