Блог

Моя цель-создать таблицу с загрузкой React. Для начала я использовал следующий пример.

Теперь у меня следующая проблема: вместо того, чтобы строка заголовка таблицы была выше всего, она внезапно оказалась слева от тела. Я взял код точно так же, как в примере, и поэтому не знаю, почему это происходит.

Я использую версию react-bootstrap: 1.5.2 и импортировал CSS в класс index.js вот так import 'bootstrap/dist/css/bootstrap.min.css'; .

И это код, который я скопировал со страницы и вставил в свой код 1:1.

                 <Table striped bordered hover>
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td colSpan="2">Larry the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </Table>
 

Как я могу это исправить и в чем была проблема?

Вы импортировали стол?

 import Table from 'react-bootstrap/Table'
 

Смотрите нижнюю часть документации, чтобы узнать больше:
https://react-bootstrap.netlify.app/components/table/#table-api