Swing/HtmlTableBorderStyle のバックアップ(No.2)

  • category: swing folder: HtmlTableBorderStyle title: JLabelに表示するtableタグの罫線を変更する tags: [HTML, CSS, StyleSheet, JLabel] author: aterai pubdate: 2016-02-08T00:00:25+09:00 description: JLabelなどのコンポーネントにHTMLのtableタグを使用して描画する表の罫線を分離表示ではなく結合表示に変更します。 image: https://lh3.googleusercontent.com/-KUe25svxTkQ/VrdVpBBO6TI/AAAAAAAAONE/x6Lvt2P_x_c/s800-Ic42/HtmlTableBorderStyle.png

概要

JLabelなどのコンポーネントにHTMLのtableタグを使用して描画する表の罫線を分離表示ではなく結合表示に変更します。

Screenshot

screenshot

Download

サンプルコード

String TD1 = "<td style='background-color:white;border-right:1px solid green;border-top:1px solid blue'>a...";
String TS1 = "style='border-left:1px solid red;border-bottom:1px solid red;background-color:yellow' cellspacing='0px' cellpadding='5px'";
String html1 = "<html><table " + TS1 + ">" + "<tr>" + TD1 + TD1 + "<tr>" + TD1 + TD1;

String TD2 = "<td style='background-color:white;border-right:1px solid green;border-bottom:1px solid blue'>a...";
String TS2 = "style='border-left:1px solid red;border-top:1px solid red;background-color:yellow' cellspacing='0px' cellpadding='5px'";
String html2 = "<html><table " + TS2 + ">" + "<tr>" + TD2 + TD2 + "<tr>" + TD2 + TD2;

String TD3 = "<td style='background-color:white'>a...";
String TS3 = "style='border:0px;background-color:red' cellspacing='1px' cellpadding='5px'";
String html3 = "<html><table " + TS3 + ">" + "<tr>" + TD3 + TD3 + "<tr>" + TD3 + TD3;
View in GitHub: Java, Kotlin

解説

SwingのCSSでは、tableのborder-collapseプロパティに対応していないので、border-bottomなどを組み合わせて罫線を結合表示します。

  • border-left, border-bottom
    • 表にborder-leftとborder-bottom、セルにborder-rightとborder-topの罫線を1pxの実線で描画
  • border-left, border-top
    • 表にborder-leftとborder-top、セルにborder-rightとborder-bottomの罫線を1pxの実線で描画
    • 表の背景色(このサンプルではbackground-color:yellow)が上下左右に余分に表示されてしまう(バグ？)
  • cellspacing

参考リンク

コメント