HTML Table formatting using css not working in JTextPane

Question

I am trying to implement a view only HTML pane for some specific project. I am using JTextPane to render HTML using content type as "text/html". I was having tables in my input HTML so in order to give these tables border, i thought of using css styling, but unfortunately it did not work out.

If I put border property as part of table itself then it works but not with css styling.

Here is the sample code i created to recreate issue. content1 does not creates border for my table but content2 creates it. I want to use content1 approach as i have plenty of html files with tables. Thanks for your time, any help will be much appreciated.

import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTextPane;


public class TestTextPane {

    private static int X = 200;
    private static int Y = 200;
    private static int W = 600;
    private static int H = 400;

    public static final String content1 = "<html>\r\n" + 
            "  <head>\r\n" + 
            "    <style type=\"text/css\">\r\n" + 
            "      <!--\r\n" + 
            "        table,th, td { border: 1px solid black }\r\n" + 
            "        body, p { font-family: Courier; font-size: 14 }\r\n" + 
            "      -->\r\n" + 
            "    </style>\r\n" + 
            "    \r\n" + 
            "  </head>\r\n" + 
            "  <body>\r\n" + 
            "    <div align=\"left\">\r\n" + 
            "      <b>Q: What is the difference between GET and POST method? </b>\r\n" + 
            "    </div>\r\n" + 
            "    <p>\r\n" + 
            "      A:\r\n" + 
            "    </p>\r\n" + 
            "    <table>\r\n" + 
            "      <tr>\r\n" + 
            "        <th width=\"50%\">\r\n" + 
            "          GET\r\n" + 
            "        </th>\r\n" + 
            "        <th>\r\n" + 
            "          POST\r\n" + 
            "        </th>\r\n" + 
            "      </tr>\r\n" + 
            "      <tr>\r\n" + 
            "        <td>\r\n" + 
            "          GET is a safe method (idempotent)\r\n" + 
            "        </td>\r\n" + 
            "        <td>\r\n" + 
            "          POST is non-idempotent method\r\n" + 
            "        </td>\r\n" + 
            "      </tr>\r\n" + 
            "      <tr>\r\n" + 
            "        <td>\r\n" + 
            "          We can send limited data with GET method and it&#8217;s sent in the header \r\n" + 
            "          request URL\r\n" + 
            "        </td>\r\n" + 
            "        <td>\r\n" + 
            "          we can send large amount of data with POST because it&#8217;s part of the \r\n" + 
            "          body.\r\n" + 
            "        </td>\r\n" + 
            "      </tr>\r\n" + 
            "    </table>\r\n" + 
            "    <br>\r\n" + 
            "    <br>\r\n" + 
            "    \r\n" + 
            "  </body>\r\n" + 
            "</html>";

    public static final String content2 = "<html>\r\n" + 
    "  <head>\r\n" + 
    "    <style type=\"text/css\">\r\n" + 
    "      <!--\r\n" + 
    "        body, p { font-family: Courier; font-size: 14 }\r\n" + 
    "      -->\r\n" + 
    "    </style>\r\n" + 
    "    \r\n" + 
    "  </head>\r\n" + 
    "  <body>\r\n" + 
    "    <div align=\"left\">\r\n" + 
    "      <b>Q: What is the difference between GET and POST method? </b>\r\n" + 
    "    </div>\r\n" + 
    "    <p>\r\n" + 
    "      A:\r\n" + 
    "    </p>\r\n" + 
    "    <table border=1>\r\n" + 
    "      <tr>\r\n" + 
    "        <th width=\"50%\">\r\n" + 
    "          GET\r\n" + 
    "        </th>\r\n" + 
    "        <th>\r\n" + 
    "          POST\r\n" + 
    "        </th>\r\n" + 
    "      </tr>\r\n" + 
    "      <tr>\r\n" + 
    "        <td>\r\n" + 
    "          GET is a safe method (idempotent)\r\n" + 
    "        </td>\r\n" + 
    "        <td>\r\n" + 
    "          POST is non-idempotent method\r\n" + 
    "        </td>\r\n" + 
    "      </tr>\r\n" + 
    "      <tr>\r\n" + 
    "        <td>\r\n" + 
    "          We can send limited data with GET method and it&#8217;s sent in the header \r\n" + 
    "          request URL\r\n" + 
    "        </td>\r\n" + 
    "        <td>\r\n" + 
    "          we can send large amount of data with POST because it&#8217;s part of the \r\n" + 
    "          body.\r\n" + 
    "        </td>\r\n" + 
    "      </tr>\r\n" + 
    "    </table>\r\n" + 
    "    <br>\r\n" + 
    "    <br>\r\n" + 
    "    \r\n" + 
    "  </body>\r\n" + 
    "</html>";

    /**
     * @param args
     */
    public static void main(String[] args) {
        JFrame frame = new JFrame();
        frame.setBounds(X, Y, W, H);

        JTextPane pane = new JTextPane();
        pane.setContentType("text/html");
        pane.setEditable(false);

        JScrollPane scrollPane = new JScrollPane(pane);
        scrollPane.setBounds(X,Y,W,H);

        frame.getContentPane().add(scrollPane);

        pane.setText(content2); // change content here

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }

}

add tr in style as well table,tr, th, td { border: 1px solid black } for content1 — Braj
– Braj, Commented May 20, 2014 at 10:35

Andrew Thompson · Accepted Answer · 2014-05-20 10:35:30Z

I removed the comment notation from the style and added units for the size of the font.

enter image description here

import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTextPane;

public class TestTextPane {

    private static int X = 200;
    private static int Y = 200;
    private static int W = 600;
    private static int H = 400;

    public static final String content1 = "<html>\r\n" +
            "  <head>\r\n" +
            "    <style type=\"text/css\">\r\n" +
            "        table, th, td { border: 2px solid #FF0000; }\r\n" +
            // be sure to add a unit to the font size, otherwise it is invalid
            "        body, p { font-family: Courier; font-size: 14px; }\r\n" +
            "    </style>\r\n" +
            "    \r\n" +
            "  </head>\r\n" +
            "  <body>\r\n" +
            "    <div align=\"left\">\r\n" +
            "      <b>Q: What is the difference between GET and POST method? </b>\r\n" +
            "    </div>\r\n" +
            "    <p>\r\n" +
            "      A:\r\n" +
            "    </p>\r\n" +
            "    <table>\r\n" +
            "      <tr>\r\n" +
            "        <th width=\"50%\">\r\n" +
            "          GET\r\n" +
            "        </th>\r\n" +
            "        <th>\r\n" +
            "          POST\r\n" +
            "        </th>\r\n" +
            "      </tr>\r\n" +
            "      <tr>\r\n" +
            "        <td>\r\n" +
            "          GET is a safe method (idempotent)\r\n" +
            "        </td>\r\n" +
            "        <td>\r\n" +
            "          POST is non-idempotent method\r\n" +
            "        </td>\r\n" +
            "      </tr>\r\n" +
            "      <tr>\r\n" +
            "        <td>\r\n" +
            "          We can send limited data with GET method and it&#8217;s sent in the header \r\n" +
            "          request URL\r\n" +
            "        </td>\r\n" +
            "        <td>\r\n" +
            "          we can send large amount of data with POST because it&#8217;s part of the \r\n" +
            "          body.\r\n" +
            "        </td>\r\n" +
            "      </tr>\r\n" +
            "    </table>\r\n" +
            "    <br>\r\n" +
            "    <br>\r\n" +
            "    \r\n" +
            "  </body>\r\n" +
            "</html>";

    public static void main(String[] args) {
        JFrame frame = new JFrame();
        frame.setBounds(X, Y, W, H);

        JTextPane pane = new JTextPane();
        pane.setContentType("text/html");
        pane.setEditable(false);

        JScrollPane scrollPane = new JScrollPane(pane);
        scrollPane.setBounds(X,Y,W,H);

        frame.getContentPane().add(scrollPane);

        pane.setText(content1); // change content here

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

Thanks for your quick response. I did aforementioned changes but still not able to get borders for table.

Braj · Accepted Answer · 2014-05-20 10:47:01Z

0

This is what I tried for content1 and its working fine.

I added this line

body table { border: 1px solid red }

sample code:

public static final String content1 = "<html>\r\n"
        + "  <head>\r\n"
        + "    <style type=\"text/css\">\r\n"
        + "      <!--\r\n"
        + "        table, th, td { border: 1px solid black }\r\n"
        + "        body table { border: 1px solid red }\r\n"
        + "        body, p { font-family: Courier; font-size: 14; }\r\n"
        + "      -->\r\n"
        + "    </style>\r\n"

enter image description here

answered May 20, 2014 at 10:47

Braj

46.9k5 gold badges63 silver badges77 bronze badges

5 Comments

Sanjeev Over a year ago

Tried this suggestion but not able to get the border :(

Braj Over a year ago

Please validate my screenshot. Is this what you want?

Sanjeev Over a year ago

I just want border for my table in single color, i know it can be achieved by what you suggested but still i am not able to get it on my program

Braj Over a year ago

Please copy it from my post if this is what you want. change the color as per your requirement. change red to black if needed. This is more related to html css styling.

Braj Over a year ago

add tr in style as well table,tr, th, td { border: 1px solid black } for content1 if it's not working.

Community · Accepted Answer · 2017-05-23 12:07:55Z

0

I tried all the above solutions but unfortunately any of these did not work for me. I was searching for the solution and i got into this post

And i tried table, th, td { border-width: 1px solid black } voila it worked for me. I dont know why the plain border property did not work for me but it worked for others.

Thanks a lot for all you help Guys.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered May 20, 2014 at 11:08

Sanjeev

9,9762 gold badges24 silver badges33 bronze badges

Collectives™ on Stack Overflow

HTML Table formatting using css not working in JTextPane

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related