Прокрутка материала интерфейса тела стола по вертикали - PullRequest
Новая
       16

Прокрутка материала интерфейса тела стола по вертикали

0 голосов
/ 18 марта 2019

Я использую таблицу пользовательского интерфейса для своего приложения реагирования. Я хочу прокручивать его тело вертикально, если таблица слишком длинная. Вот таблица. 

<Table style={TableBorder}>
                            <colgroup>
                                <col style={{width: '10%'}}/>
                                <col style={{width: '30%'}}/>
                                <col style={{width: '10%'}}/>
                                <col style={{width: '10%'}}/>
                                <col style={{width: '10%'}}/>
                                <col style={{width: '10%'}}/>
                                <col style={{width: '10%'}}/>
                                <col style={{width: '10%'}}/>
                            </colgroup>
                            <TableHead>
                                <TableRow>
                                    <TableCell align="center"
                                               style={styles.table.tableHead.tableCell}>PRODUCT</TableCell>
                                    <TableCell align="center"
                                               style={styles.table.tableHead.tableCell}>BUILDS</TableCell>
                                    <TableCell align="right"
                                               style={styles.table.tableHead.tableCell}>INSTRUCTIONS(%)</TableCell>
                                    <TableCell align="right"
                                               style={styles.table.tableHead.tableCell}>BRANCHES(%)</TableCell>
                                    <TableCell align="right"
                                               style={styles.table.tableHead.tableCell}>COMPLEXITY(%)</TableCell>
                                    <TableCell align="right"
                                               style={styles.table.tableHead.tableCell}>LINES(%)</TableCell>
                                    <TableCell align="right"
                                               style={styles.table.tableHead.tableCell}>METHODS(%)</TableCell>
                                    <TableCell align="right"
                                               style={styles.table.tableHead.tableCell}>CLASSES(%)</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {this.state.tableSummary.map((row, index) => (
                                    <TableRow key={index}
                                              style={((row[1] > 0) ? styles.table.tableBody.tableCell.cursorPointer : styles.table.tableBody.tableCell.cursorText)}
                                              hover>
                                        <TableCell component="th" scope="row"
                                                   align="left">{row.name}</TableCell>
                                        <TableCell style={builds}
                                                   align="left">{formatBuildString(row.build_no)}</TableCell>
                                        <TableCell
                                            align="right">{getPercentage(row.data.totalIns, row.data.missIns)}</TableCell>
                                        <TableCell
                                            align="right">{getPercentage(row.data.totalBranches, row.data.missBranches)}</TableCell>
                                        <TableCell
                                            align="right">{getPercentage(row.data.totalCxty, row.data.missCxty)}</TableCell>
                                        <TableCell
                                            align="right">{getPercentage(row.data.totalLines, row.data.missLines)}</TableCell>
                                        <TableCell
                                            align="right">{getPercentage(row.data.totalMethods, row.data.missMethods)}</TableCell>
                                        <TableCell
                                            align="right">{getPercentage(row.data.totalClasses, row.data.missClasses)}</TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>

Я использовал следующие стили для прокрутки тела таблицы по вертикали. 

thead, tbody { display: block; }
tbody {
   height: 100px;       /* Just for the demo          */
   overflow-y: auto;    /* Trigger vertical scroll    */
   overflow-x: hidden;  /* Hide the horizontal scroll */
}

Но когда я использую его, моя таблица не выровнена хорошо. Пожалуйста, помогите мне сделать это.

1 Ответ

0 голосов
/ 18 марта 2019

Таким способом вы должны придать стилю таблицу.

....

*. Css файл

.scroll {

высота: 100px;
overflow-y: auto;
overflow-x: скрытый;

}

или если вы настраиваете таблицу со стилизованным компонентом, вы можете сделать это следующим образом.

const ScrollYTable = styled (Table) ̀

высота: 100px;
переполнение-у: авто;
переполнение-х: скрыто;

̀

...