javafx之TableView的FXCSS

TableView的FXCSS

一、特殊的table设置

TableView的单元之间去掉行横线 

.table-view .table-row-cell {  
    -fx-background-insets: 0;  
}  

TableView的单元之间去掉没有数据的竖线 

table-row-cell:empty .table-cell {  
    -fx-border- 0px;  
}  

TableView的单元之间去掉竖线 

table-row-cell .table-cell {  
    -fx-border- 0px;  
}  

TableView的TableColumn的列头设置

.table-view .column-header{
    -fx-border-color:white lightgray white white;  
}

table的空闲的列头设置

.table-view .filler{
     -fx-background-color: white;    
}

table的列首背景设置，其中包括column-header，filler，MenuButton

.table-view .column-header-background{   
   -fx-background-color: white;    
}

/* remove double borders from scrollbars */

table的垂直滚动条设置

.table-view > .virtual-flow > .scroll-bar:vertical{
    -fx-background-insets: 0, 0 0 0 1;
    -fx-padding: -1 -1 -1 0;
}

table的水平滚动条设置

.table-view > .virtual-flow > .scroll-bar:horizontal{
    -fx-background-insets: 0, 1 0 0 0;
    -fx-padding: 0 -1 -1 -1;
}

table的边角设置

.table-view > .virtual-flow > .corner {
    -fx-background-color: derive(-fx-base,-1%); /*-fx-base 是modena 预先定义的颜色*/
}

/* Selected rows */

.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected{
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

/* Selected when control is not focused */

.table-row-cell:filled > .table-cell:selected{
    -fx-background: -fx-selection-bar-non-focused;
    -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
}

/* focused cell (keyboard navigation) */

.table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused{
    -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
    -fx-background-insets: 0, 1, 2;
}

.table-view{
    /* Constants used throughout the tableview. */
    -fx-table-header-border-color: -fx-box-border;
    -fx-table-cell-border-color: derive(-fx-color,5%);
}

二、TableView tableRow编辑

tableRow

/* Each row in the table is a table-row-cell. Inside a table-row-cell is any number of table-cell. */
.table-row-cell {
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0;
    -fx-text-fill: -fx-text-background-color;
}

tableRow单元单数tableCell

.table-row-cell:odd {
    -fx-background: -fx-control-inner-background-alt;
}

三、TableView 单元tableCell编辑

tableCell

.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}

tableCell选择单元

.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
}

tableCell最右可视单元

/* When in constrained resize mode, the right-most visible cell should not have
   a right-border, as it is not possible to get this cleanly out of view without
   introducing horizontal scrollbars (see RT-14886). */
.table-view:constrained-resize > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:last-visible {
    -fx-border-color: transparent;
}

四、TableView列头编辑

TableView列大小重新调整线

/* The column-resize-line is shown when the user is attempting to resize a column. */
.table-view .column-resize-line {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-background;
    -fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
}

TableView列头背景

/* This is the area behind the column headers. An ideal place to specify background
   and border colors for the whole area (not individual column-header's). */
.table-view .column-header-background{
    -fx-background-color: -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0, 1;
}

TableView列头行设置背景

/* The column header row is made up of a number of column-header, one for each
   TableColumn, and a 'filler' area that extends from the right-most column
   to the edge of the tableview, or up to the 'column control' button. */
.table-view .column-header,
.table-view .filler,
.table-view > .column-header-background > .show-hide-columns-button,
.table-view:constrained-resize .filler{
    -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0, 0 1 1 0, 1 2 2 1;
    -fx-font-weight: bold;
    -fx-size: 2em;
    -fx-text-fill: -fx-selection-bar-text;
    -fx-padding: 0.166667em;
}

TableView空闲列

.table-view .filler,
.table-view:constrained-resize .filler{
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
}

TableView列头展示隐藏列按钮

.table-view > .column-header-background > .show-hide-columns-button {
    -fx-background-insets: 0, 0 0 1 1, 1 1 2 2;
}

TableView列头排序顺序点容器

.table-view .column-header .sort-order-dots-container{
    -fx-padding: 2 0 2 0;
}

TableView列头排序顺序

.table-view .column-header .sort-order{
    -fx-font-size: 0.916667em; /* 11pt - 1 less than the default font */
}

TableView列头排序顺序点

.table-view .column-header .sort-order-dot {
    -fx-background-color: -fx-mark-color;
    -fx-padding: 0.115em;
    -fx-background-radius: 0.115em;
}

TableView列头文本标签

.table-view .column-header .label{
    -fx-alignment: center;
}

/* Plus Symbol */
.table-view .show-hide-column-image,
 {
    -fx-background-color: -fx-mark-color;
    -fx-padding: 0.25em; /* 3px */
    -fx-shape: "M398.902,298.045c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.332,0,1.999c-0.667,0-1.333,0-2,0c0-0.667,0-1.333,0-1.999c-0.666,0-1.333,0-1.999,0c0-0.667,0-1.334,0-2c0.666,0,1.333,0,1.999,0C398.902,299.378,398.902,298.711,398.902,298.045z"; 
}

TableView列拖拽头留下的空闲区

/* When a column is being 'dragged' to be placed in a different position, there
   is a region that follows along the column header area to indicate where the
   column will be dropped. This region can be styled using the .column-drag-header
   name. */
.table-view .column-drag-header {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-border-color: transparent;
    -fx-opacity: 0.6;
}

TableView当前正在移动且半透明覆盖的列

/* Semi-transparent overlay to indicate the column that is currently being moved */
.table-view .column-overlay{
    -fx-background-color: darkgray;
    -fx-opacity: 0.3;
}

TableView列头排序箭头

/* Header Sort Arrows */
.table-view /*> column-header-background > nested-column-header >*/ .arrow{
    -fx-background-color: -fx-mark-color;
    -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */
    -fx-shape: "M 0 0 h 7 l -3.5 4 z";
}

TableView没有行列

/* This is shown when the table has no rows and/or no columns. */
.table-view .empty-table {
    -fx-background-color: white;
    -fx-font-size: 1.166667em; /* 14pt - 2 more than the default font */
}

css伪

css元素

-fx-background-color

-fx-background-radius

-fx-border-insets              //外边界插入，没有边界显示时不设置

-fx-border-color

-fx-padding

-fx-min-width

-fx-max-width

-fx-pref-width