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-width: 0px;
}

TableView 的单元之间去掉竖线

table-row-cell .table-cell {  -fx-border-width: 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 havea right-border, as it is not possible to get this cleanly out of view withoutintroducing 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 backgroundand 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 eachTableColumn, and a 'filler' area that extends from the right-most columnto 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, thereis a region that follows along the column header area to indicate where thecolumn will be dropped. This region can be styled using the .column-drag-headername. */
.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