Reputation: 9946

HTML Table formatting using css not working in JTextPane

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);
    }

}

Upvotes: 0

Answers (3)

Sanjeev

Reputation: 9946

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.

Upvotes: 0

Braj

Reputation: 46841

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

Upvotes: 0

Andrew Thompson

Reputation: 168825

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);
    }
}

Upvotes: 1

HTML Table formatting using css not working in JTextPane

Answers (3)

Related Questions