如何将第一个 body 字体样式禁用到 Handsontable hot-table 的 body 中的第一行?
How to disable first body font styles to the first row in the body of a Handsontable hot-table?
我正在努力在我的 Angular 前端显示 Handsontable。当我给出数据时。当显示 table 时,body 的第一行的字体样式使其看起来像 header(粗体、较大、颜色)。
这是我的实现的副本:
// app.component.ts
import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';
@Component({
selector: 'app-root',
template: `
<div>
<hot-table
[data]="dataset"
[colHeaders]="true"
[rowHeaders]="true"
height="auto"
licenseKey="non-commercial-and-evaluation">
<hot-column data="id" [readOnly]="true" title="ID"></hot-column>
<hot-column data="name" title="Full name"></hot-column>
<hot-column data="address" title="Street name"></hot-column>
</hot-table>
</div>
`,
})
class AppComponent {
dataset: any[] = [
{id: 1, name: 'Ted Right', address: 'Wall Street'},
{id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},
{id: 3, name: 'Joan Well', address: 'Broadway'},
{id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
{id: 5, name: 'Michael Fair', address: 'Lombard Street'},
{id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
{id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
{id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
];
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HotTableModule } from '@handsontable/angular';
@NgModule({
imports: [ BrowserModule, HotTableModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule { }
// bootstrap
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });
我尝试使用以下方法定位 css 中的特定元素:
tbody tr:first-child {
font-size: xx-small;
}
这似乎行不通。
是否有选项或其他方法可用于删除此行的样式?
展示图片如下:
看起来第一行的数据被解释为 header,所以我敢打赌你尝试的 css 选择器不起作用,因为第一行的元素是th
而不是 tr
与其尝试使用 css 修复它,不如尝试使用选项使其显示您想要的内容。例如,将 colHeader 设置为 false,或尝试解释不同的选项 here.
CSS 中的所有样式都必须连接到 TH 或 TD。您可能会发现此示例很有帮助 http://jsfiddle.net/znkmwfpt/1/,其中 JS 部分仅使用 header 挂钩 (afterGetColHeader
) 来附加 className
.
afterGetColHeader: function(col, TH) {
var TR = TH.parentNode;
var THEAD = TR.parentNode;
var headerLevel = (-1) * THEAD.childNodes.length + Array.prototype.indexOf.call(THEAD.childNodes, TR);
function applyClass(elem, className) {
if (!Handsontable.dom.hasClass(elem, className)) {
Handsontable.dom.addClass(elem, className);
}
}
CSS部分
* {
font-family: Verdana, Helvetica, Arial, FreeSans, sans-serif;
font-size: 12px;
}
.handsontable THEAD TH.color1 {
background: #FF6138;
border-color: #D4441F;
}
.handsontable THEAD TH.color1 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #FF6138;
-webkit-box-shadow: 0px 0px 0px 6px #FF6138;
background: #FF6138;
border-color: #D4441F;
}
.handsontable THEAD TH.color2 {
background: #79BD8F;
border-color: #549A6B;
}
.handsontable THEAD TH.color2 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #79BD8F;
-webkit-box-shadow: 0px 0px 0px 6px #79BD8F;
background: #79BD8F;
border-color: #549A6B;
}
.handsontable THEAD TH.color3 {
background: #BEEB9F;
border-color: #8FC768;
}
.handsontable THEAD TH.color3 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #BEEB9F;
-webkit-box-shadow: 0px 0px 0px 6px #BEEB9F;
background: #BEEB9F;
border-color: #8FC768;
}
.handsontable THEAD TH.color4 {
background: #FFFF9D;
border-color: #DEDE9A;
}
.handsontable THEAD TH.color4 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #FFFF9D;
-webkit-box-shadow: 0px 0px 0px 6px #FFFF9D;
background: #FFFF9D;
border-color: #DEDE9A;
}
.handsontable THEAD TH.color5 {
background: #00A388;
border-color: #38887B;
}
.handsontable THEAD TH.color5 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #00A388;
-webkit-box-shadow: 0px 0px 0px 6px #00A388;
background: #00A388;
border-color: #38887B;
}
此外,某些属性正在使用 !important
,因此您可能还需要添加它。
我正在努力在我的 Angular 前端显示 Handsontable。当我给出数据时。当显示 table 时,body 的第一行的字体样式使其看起来像 header(粗体、较大、颜色)。
这是我的实现的副本:
// app.component.ts
import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';
@Component({
selector: 'app-root',
template: `
<div>
<hot-table
[data]="dataset"
[colHeaders]="true"
[rowHeaders]="true"
height="auto"
licenseKey="non-commercial-and-evaluation">
<hot-column data="id" [readOnly]="true" title="ID"></hot-column>
<hot-column data="name" title="Full name"></hot-column>
<hot-column data="address" title="Street name"></hot-column>
</hot-table>
</div>
`,
})
class AppComponent {
dataset: any[] = [
{id: 1, name: 'Ted Right', address: 'Wall Street'},
{id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},
{id: 3, name: 'Joan Well', address: 'Broadway'},
{id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
{id: 5, name: 'Michael Fair', address: 'Lombard Street'},
{id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
{id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
{id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
];
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HotTableModule } from '@handsontable/angular';
@NgModule({
imports: [ BrowserModule, HotTableModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule { }
// bootstrap
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => { console.error(err) });
我尝试使用以下方法定位 css 中的特定元素:
tbody tr:first-child {
font-size: xx-small;
}
这似乎行不通。
是否有选项或其他方法可用于删除此行的样式?
展示图片如下:
看起来第一行的数据被解释为 header,所以我敢打赌你尝试的 css 选择器不起作用,因为第一行的元素是th
而不是 tr
与其尝试使用 css 修复它,不如尝试使用选项使其显示您想要的内容。例如,将 colHeader 设置为 false,或尝试解释不同的选项 here.
CSS 中的所有样式都必须连接到 TH 或 TD。您可能会发现此示例很有帮助 http://jsfiddle.net/znkmwfpt/1/,其中 JS 部分仅使用 header 挂钩 (afterGetColHeader
) 来附加 className
.
afterGetColHeader: function(col, TH) {
var TR = TH.parentNode;
var THEAD = TR.parentNode;
var headerLevel = (-1) * THEAD.childNodes.length + Array.prototype.indexOf.call(THEAD.childNodes, TR);
function applyClass(elem, className) {
if (!Handsontable.dom.hasClass(elem, className)) {
Handsontable.dom.addClass(elem, className);
}
}
CSS部分
* {
font-family: Verdana, Helvetica, Arial, FreeSans, sans-serif;
font-size: 12px;
}
.handsontable THEAD TH.color1 {
background: #FF6138;
border-color: #D4441F;
}
.handsontable THEAD TH.color1 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #FF6138;
-webkit-box-shadow: 0px 0px 0px 6px #FF6138;
background: #FF6138;
border-color: #D4441F;
}
.handsontable THEAD TH.color2 {
background: #79BD8F;
border-color: #549A6B;
}
.handsontable THEAD TH.color2 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #79BD8F;
-webkit-box-shadow: 0px 0px 0px 6px #79BD8F;
background: #79BD8F;
border-color: #549A6B;
}
.handsontable THEAD TH.color3 {
background: #BEEB9F;
border-color: #8FC768;
}
.handsontable THEAD TH.color3 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #BEEB9F;
-webkit-box-shadow: 0px 0px 0px 6px #BEEB9F;
background: #BEEB9F;
border-color: #8FC768;
}
.handsontable THEAD TH.color4 {
background: #FFFF9D;
border-color: #DEDE9A;
}
.handsontable THEAD TH.color4 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #FFFF9D;
-webkit-box-shadow: 0px 0px 0px 6px #FFFF9D;
background: #FFFF9D;
border-color: #DEDE9A;
}
.handsontable THEAD TH.color5 {
background: #00A388;
border-color: #38887B;
}
.handsontable THEAD TH.color5 .collapsibleIndicator {
box-shadow: 0px 0px 0px 6px #00A388;
-webkit-box-shadow: 0px 0px 0px 6px #00A388;
background: #00A388;
border-color: #38887B;
}
此外,某些属性正在使用 !important
,因此您可能还需要添加它。