bootstrap адаптивное вырезание содержимого таблицы и тд - PullRequest
0 голосов
/ 07 февраля 2020

Я пытаюсь отобразить таблицу с двумя столбцами, используя Bootstrap 4. Однако текст обрезается (обрезается и скрывается), заставляя пользователей прокручивать вправо.

Подробная информация о том, когда обрезка (ошибка ) происходит: 1. Мобильный: область просмотра <767px 2. «Большая» таблица: Т.е. много строк. Допустим,> 100 строк, хотя я не знаю точного #, когда он не работает. 3. «Большой» текстовый контент. Т.е. один из столбцов имеет> 500 символов.

Если этих условий не существует, перенос слов отлично работает. Размер таблицы отлично меняется.

Я искал решения и пробовал различные bootstrap классы и стили (например, w-100 и обертывание тегов таблицы), но ничего не помогает.

Вот мой код (извините, в моем реальном коде гораздо больше строк контента, но переполнение стека ограничивает объем, который я могу опубликовать)

TEst

<div class="col-12 table-responsive">  
                <table class="table table-sm table-hover table-striped text-wrap" >
                    <thead class="table-dark">
                        <tr>
                            <th>Term</th>
                            <th>Definition</th>
                        </tr>
                    </thead>
                    <tbody >


                        <tr>
                            <td style="font-size:15px;font-weight:600;">Paier College of Art</td>
                            <td style="font-size:14px;">A four-year school in Hamden Connecticut near New Haven, it was founded in 1946 by Edward and Adele Paier with the name Paier School of Applied Arts. In 1982, it received a charter and accreditation to offer a four-year Bachelor of Arts degree in fine arts, graphic design, illustration, interior design and photography. Among former students are David and Doug Brega, Kenneth Southworth Davies and Louis Guarnaccia.  Sources: Wikipedia, http://en.wikipedia.org/wiki/Paier_College_of_Art; AskART biographies</td>
                        </tr>

                        <tr>
                            <td style="font-size:15px;font-weight:600;">Paier School of Applied Arts</td>
                            <td style="font-size:14px;">See Paier College of Art</td>
                        </tr>



                        <tr>
                            <td style="font-size:15px;font-weight:600;">Puteaux Group</td>
                            <td style="font-size:14px;">Named for Puteaux, a suburb of western Paris, France, it was a group of about 20 French artists, excepting Alexander Calder, an American; Frantisek Kupka, from Czechoslavia; and Louis Marcoussis from Poland.  The Group's purpose was to expand the definition of Cubism to be more embracing than the methods of Cubist founders Pablo Picasso and George Braque. In 1911, the Puteaux Group stirred much controversy and brought public attention to themselves with their exhibition at the Salon des Indépendants. Much of their work was described as being by "fauves" or 'wild beasts' in that it was very garish in color and far-out experimental in composition. Members included Albert Gleizes, Fernand Léger, Francis Picabia, Robert Delaunay, Marcel Duchamp, and Jacques Villon.  Source: http://en.wikipedia.org/wiki/Puteaux_Group </td>
                        </tr>

                        <tr>
                            <td style="font-size:15px;font-weight:600;">Putti, Putto</td>
                            <td style="font-size:14px;">Describing "plump little naked boys with wings, they are often seen in Renaissance, Mannerist, Baroque and Rococo Art" to symbolize love and affection.  A single figure of this type is called a 'putto'.  Source: arthistory.about.com</td>
                        </tr>

                        <tr>
                            <td style="font-size:15px;font-weight:600;">Pyramid Club</td>
                            <td style="font-size:14px;">Located at 1517 Girard Avenue in Philadelphia and founded in 1937, this was a prestigious organization for the "cultural, civic and social advancement of African Americans in Philadelphia. Under the direction of painter Humbert Howard, the Club sponsored a variety of cultural events such as annual art exhibitions and the highlighting of individual artists beginning in 1941 with Henry Ossawa Tanner. Other featured artists were Beauford Delaney, Dox Thrash.  Source: 'Beauford Delaney: From New York to Paris', "American Art Review", December 2005.</td>
                        </tr>

                        <tr>
                            <td style="font-size:15px;font-weight:600;">Pyrographics, Pyrograph</td>
                            <td style="font-size:14px;">The art of woodburning or in translationg from the Greek, 'drawing with fire' it was known in the Victorian era as Pokerwork because a red hot poker was used.  In the modern era, there is a machine called the Pyrograph or Woodburner, which does woodburning and imprinting.  The term is also expanded to refer to precise design imprinting on objects such as mugs and glassware. Sources: http://pyro-graphics.com/; www.pyromugs.com</td>
                        </tr>

                        <tr>
                            <td style="font-size:15px;font-weight:600;">Pyrography</td>
                            <td style="font-size:14px;">Art of creating designs on a surface with heated tools, it is usually applied with a hot poker on leather or wood. Harry Leon Moses, early 20th century artist in New Orleans, was a pyrographer as was Robert Ball Hughes in the 19th Century. Sources: www.thefreedictionary.com/pyrographer; AskART database </td>
                        </tr>


                    </tbody>
                </table>
           </div>

снимок экрана с обрезанным текстом в таблице bs

...