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

?

總結

以上是生活随笔為你收集整理的javafx之TableView的FXCSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。