Стол без полей реакции-бутстрап-стол

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.