无边框表 react-bootstrap-table答案

【问题标题】：Borderless table react-bootstrap-table无边框表 react-bootstrap-table
【发布时间】：2018-07-03 18:23:30
【问题描述】：

我正在尝试使我的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';
  }

现在，唯一保持不变的边框是内部列边框和表格底部的边框。即便如此，这似乎是一种非常冗长的方法。这应该怎么做？

【问题讨论】：

标签： css reactjs react-bootstrap-table

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

还有其他属性可能对您有所帮助...

例如-

<BootstrapTable bootstrap4 keyField='id' data={data} columns={columns}  bordered={true} striped={true} hover={true} />

【讨论】：