• 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などのコンポーネントにHTMLtableタグを使用して描画する表の罫線を分離表示ではなく結合表示に変更します。

サンプルコード

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

解説

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

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

参考リンク

コメント