Question

我正试图使我的react-bootstrap-table表完全无边界，并签出了所有文档和GitHub问题，但无法获得完全无边界的表。这是我所拥有的：

在我的CSS中：

.react-bs-container-header tr {
  border-bottom-style: hidden !important;
}
.react-bs-container-header {
  border-bottom-style: hidden !important;
  border-left-style: hidden !important;
  border-right-style: hidden !important;
}

.columnClassNameFormat1 {
  color: #4F58EA;
  border: none;

}

在我的React组件中：

<BootstrapTable data={this.state.data} version='4' options={ this.getOptions() }
              tableHeaderClass='columnClassNameFormat1'
              tableBodyClass='columnClassNameFormat1'
              containerClass='columnClassNameFormat1'
              tableContainerClass='columnClassNameFormat1'
              headerContainerClass='columnClassNameFormat1'
              bodyContainerClass='columnClassNameFormat1'
              trStyle = { this.rowClassNameFormat }
              >
              <TableHeaderColumn isKey dataField='name' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1' isKey > Name</TableHeaderColumn>
              <TableHeaderColumn dataField='img' dataFormat={imageFormatter} >Images</TableHeaderColumn>
              <TableHeaderColumn dataField='category1' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1'>Category</TableHeaderColumn>
              <TableHeaderColumn dataField='category2' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1'>Category</TableHeaderColumn>
              <TableHeaderColumn dataField='category3' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1'>Category</TableHeaderColumn>
              <TableHeaderColumn dataField='category4' dataFormat={formattedTextH3} columnClassName='columnClassNameFormat1' >Category</TableHeaderColumn>

            </BootstrapTable>

 ...

  rowClassNameFormat(row, rowIdx) {
     return 'border: none';
  }

现在，它唯一要保持的边框是内部列边框和表格底部的边框。即使这样，这似乎还是一种非常冗长的方法。应该怎么做？

Answer 1

react-bootstrap-table具有属性bordered={ false }。

将其添加到<BootstrapTable data={this.state.data} bordered={ false } ... />。它将删除部分内部边框。

根据您的目标，当您覆盖CSS类时，需要删除所有其他边框。

无边界表react-bootstrap-table

1 个答案: