Flutter_html: table line not showing

Created on 26 Jun 2020  ·  7Comments  ·  Source: Sub6Resources/flutter_html

I have a problem with the table line is not visible please help here is my code

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html/html_parser.dart';
import 'package:flutter_html/style.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: new MyHomePage(title: 'flutter_html Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

const htmlData = """
<p style="text-align:center"><strong>&ldquo;AGRODRIP&rdquo;&nbsp; корхонаси ишлаб чиқараётган маҳсулотлар</strong></p>

<p style="text-align:center">&nbsp;</p>

<table border="1" cellspacing="0" class="-11" style="border-collapse:collapse; border:solid windowtext 1.0pt; margin-left:5.4pt; width:100%">
    <thead>
        <tr>
            <td style="height:37.35pt; width:205.55pt">
            <p style="margin-left:0cm; margin-right:0cm; text-align:center"><span style="font-size:11pt"><span style="font-family:Calibri,sans-serif"><span style="font-size:14.0pt">Маҳсулот номи</span></span></span></p>
            </td>
            <td style="height:37.35pt; width:163.05pt">
            <p style="margin-left:0cm; margin-right:0cm; text-align:center"><span style="font-size:11pt"><span style="font-family:Calibri,sans-serif"><span style="font-size:14.0pt">Ўлчов бирлиги</span></span></span></p>
            </td>
            <td style="height:37.35pt; width:99.25pt">
            <p style="margin-left:0cm; margin-right:0cm; text-align:center"><span style="font-size:11pt"><span style="font-family:Calibri,sans-serif"><span style="font-size:14.0pt">Нархи,</span></span></span></p>

            <p style="margin-left:0cm; margin-right:0cm; text-align:center"><span style="font-size:11pt"><span style="font-family:Calibri,sans-serif"><span style="font-size:14.0pt">сўм</span></span></span></p>
            </td>
        </tr>
    </thead>
</table>

<p style="text-align:center"><img alt="" src="https://nwrmp.uz/tomchi/uploads/korxonalar/ishlab_chiqaruvchi/debyut/debyutex1.jpg" style="height:194px; width:259px" /></p>

""";

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('flutter_html Example'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Html(
          data: htmlData,
          //Optional parameters:
          style: {
            "html": Style(
              backgroundColor: Colors.black12,
//              color: Colors.white,
            ),
//            "h1": Style(
//              textAlign: TextAlign.center,
//            ),
            "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),
            ),
            "var": Style(fontFamily: 'serif'),
          },
//          customRender: {
//            "flutter": (RenderContext context, Widget child, attributes, _) {
//              return FlutterLogo(
//                style: (attributes['horizontal'] != null)
//                    ? FlutterLogoStyle.horizontal
//                    : FlutterLogoStyle.markOnly,
//                textColor: context.style.color,
//                size: context.style.fontSize.size * 5,
//              );
//            },
//          },
          onLinkTap: (url) {
            print("Opening $url...");
          },
          onImageTap: (src) {
            print(src);
          },
          onImageError: (exception, stackTrace) {
            print(exception);
          },
        ),
      ),
    );
  }
}

All 7 comments

I also have similar issues from table lines are not showing, any solutions yet?

me too

I see you have in your table

style="border-collapse:collapse; border:solid windowtext 1.0pt; margin-left:5.4pt; width:100%"

I don't think we support these css styles at all yet, but I'd have to check. You can - if that suits you use-case - using style to apply a border around your tds.

I see you have in your table

style="border-collapse:collapse; border:solid windowtext 1.0pt; margin-left:5.4pt; width:100%"

I don't think we support these css styles at all yet, but I'd have to check. You can - if that suits you use-case - using style to apply a border around your tds.

set style with td&tr
1111
2222

any solutions yet?

I see you have in your table

style="border-collapse:collapse; border:solid windowtext 1.0pt; margin-left:5.4pt; width:100%"

I don't think we support these css styles at all yet, but I'd have to check. You can - if that suits you use-case - using style to apply a border around your tds.

set style with td&tr,but the border line misalignment

I see you have in your table

style="border-collapse:collapse; border:solid windowtext 1.0pt; margin-left:5.4pt; width:100%"

I don't think we support these css styles at all yet, but I'd have to check. You can - if that suits you use-case - using style to apply a border around your tds.

any solutions yet?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

zs-dima picture zs-dima  ·  4Comments

assurancetourix picture assurancetourix  ·  3Comments

bhanuka96 picture bhanuka96  ·  4Comments

raLaaaa picture raLaaaa  ·  3Comments

AbdoXLabs picture AbdoXLabs  ·  5Comments