Как сделать таблицу с горизонтальной прокруткой с помощью Tailwindcss 2.1?

SaverGenome

Я хочу создать таблицу с горизонтальной прокруткой ее содержимого и

Я пытаюсь использовать класс whitespace-nowrap для ячеек таблицы с длинным содержимым и

overflow-x-auto для всей таблицы, например:

  <div class="editor_listing_wrapper_bix_width">

 <table class=" overflow-x-auto p-1 m-1 d2">
 <thead class="bg-gray-700 border-b-2 border-t-2 border-gray-300">
 <tr>
 <th class="w-1/12 py-2">Id</th>
 <th class="w-4/12 py-2">Name</th>
 <th class="w-4/12 py-2">Description</th>
 <th class="w-1/12 py-2"></th>
 </tr>
 </thead>
 <tbody>

 <tr>

 <td>1</td>
 <td class="whitespace-nowrap">
 Laptops
 <small class="pl-2 pt-1">
 ( Used in 2 ad(s) )
 </small>
 </td>

 <td class="whitespace-nowrap p-1">Laptops description Lorem ipsum dolor sit amet,
 consectetur
 adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
 aliqua....
 </td>

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

Пожалуйста, взгляните на ручку: https://codepen.io/sergeynilov/pen/eYgjVgM

Я использую Tailwindcss 2.1.0. Спасибо!

Vizldada

Вы не можете установить переполнение для таблицы, если вы изучили CSS вместо полоумный невежественный некомпетентный мусор, который является Попутным Ветром
, вы бы, наверное, это усвоили. Точно так же, как если бы вы научились правильно использовать HTML —

что-то идиотское, полутвитовое, интерфейсные фреймворки, такие как Tailwind и Bootstrap, не учат и не поощряют

-- вы бы знали, почему все эти загадочные презентационные занятия не оказываешь тебе никакой пользы

здесь. Особенно учитывая вашу неполную/бессмысленную конструкцию таблицы.

Если бы вы правильно использовали HTML вместо полного гунганского идиотизма ArseBreeze класса А, у вас было бы следующее:

 
<div class="editorListing">
<table>
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<td></td>
</tr>
</thead><tbody>
<tr>
<td>1</td>
<th scope="row">
Laptops
<em>( Used in 2 ad(s) )</em>
</th>
<td>
Laptops description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....
</td>

Код (разметка): И ВСЕ остальное будет в вашей таблице стилей. ГДЕ ЭТО ПРИНАДЛЕЖИТ! Поскольку в вашей разметке презентация НУЛЯ переворачивается...

Миса Сайз Йу Нева становится ПОЛНЫМ гунганом. Эвави приятель этого не знает. Джа Джа Бинкс? Глупый? Конечно. Неуклюжий? Абсолютно. Раздражающий? Держу пари. Но мальчик, это война, слышишь. Это не гунган! Попутный ветер? Они пошли ПОЛНЫЙ Гунган. В любом случае поместите overflow:auto в DIV вокруг таблицы, а не в саму таблицу. Опять же, таблицы не являются целями прокрутки.

Похожие темы	Дата
Сколько стоит нарисовать иконки?	19.12.2024, 05:12
Не работают быстрые клавиши в In Design	19.12.2024, 05:12
Сделайте Аватарку для группы вконтакте	19.12.2024, 05:12
Оцените сайт for-women-s.ru	19.12.2024, 05:12
Помогите Поправить шапку сайта	19.12.2024, 05:12
Total Noob - Имиджевая реклама	19.12.2024, 05:12
Циклическое переключение изображений разного размера при прокрутке	19.12.2024, 05:12
Запустите розыгрыш подарков в своем блоге	19.12.2024, 05:12
Создать шаблон/тему для Codeigniter	19.12.2024, 05:12
Не веб-дизайнер трясется.... Может кто-нибудь мне помочь?!?	19.12.2024, 05:12

Как сделать таблицу с горизонтальной прокруткой с помощью Tailwindcss 2.1?

SaverGenome

Vizldada

I AM

Интересно