React-table:在IE-11浏览器中为子组件获取额外的填充

时间:2018-07-12 20:01:21

标签: javascript css reactjs internet-explorer-11 react-table

我已经实现了react table,除了IE-11之外,所有浏览器都可以正常工作。

如下面的屏幕截图所示,子组件还有额外的填充。

image showing extra padding for the sub component

下面是主要组件和子组件的代码。

<ReactTable
id='facility-complaints-table'
className='table'
data={complaints}
columns={complaintsColumns}
defaultPageSize={complaints.length}
showPagination={false}
sortable={false}
resizable={false}
noDataText=''
SubComponent={row => {
return (
<div className='sub-component' >
             <ReactTable
             data={row.original.allegations}
             columns={allegationColumns}
             defaultPageSize={row.original.allegations.length}
             sortable={false}
            resizable={false}
            showPagination={false}
 />

以下是使用的样式: 禁用椭圆,改为断字

.facility-children .ReactTable .rt-table .rt-tbody .-odd { 
background-color: #ffffff;
}
.facility-children .ReactTable .rt-thead .rt-tr {
color: #000;
border-top: 1px solid #ddd;
text-align: initial;
}
.facility-children .ReactTable .rt-thead .rt-tr .rt-th{
font-family: 'Source Sans Pro Bold', sans-serif;
font-weight: bold;
}
.rt-noData {
opacity: 0;
}
.rt-td { //To disable ellipses, did this
white-space: normal !important;
word-wrap: break-word;
}
.ReactTable .rt-td:first-child {
text-align: end;
}

0 个答案:

没有答案