Как сделать таблицу с горизонтальной прокруткой с помощью 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.10.2024, 18:10
Помогите с фоновыми картинками	19.10.2024, 18:10
Как удалить границу кнопки гамбургера CSS и пространство над ней	19.10.2024, 18:10
Как заставить блог работать для чайников	19.10.2024, 18:10
Пожалуйста, помогите мне с этой маленькой проблемой CSS	19.10.2024, 18:10
Комментарии Blogger не публикуются через Open ID пользователя Wordpress	19.10.2024, 18:10
Раздел отправки сообщений в стиле форума — веб-сайт WordPress	19.10.2024, 18:10
Опыт Чоуноу/Grubhub?	19.10.2024, 18:10
Редактирование размера раскрывающегося меню - нубский вопрос	19.10.2024, 18:10
Лучший шаблон WordPress для этого сайта?	19.10.2024, 18:10

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

SaverGenome

vizldada

I AM

Интересно