How to make table with horizontal scrolling with tailwindcss 2.1?

I want to make table with horizontal scrolling for its content and
I try to use whitespace-nowrap class for table cells which have long content and
overflow-x-auto for all the table, like:

  <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:

But looks like horizontal scrolling is for all area, not for my table

Pls, take look at pen: https://codepen.io/sergeynilov/pen/eYgjVgM


I use tailwindcss 2.1.0.

Thanks!

 

You can't set overflow on a table, if you had learned CSS instead of the halfwitted ignorant incompetent trash that is Tailwind[/quote], you'd probably have learned that. Just like if you learned to use HTML properly -- something dipshit f***-wit half-tweet front-end frameworks like Tailwind and Bootstrap neither teach nor encourage -- you'd know why all those cryptic presentational classes are doing you no favors here. Particularly given your incomplete / nonsensical table construction.

If you were using HTML properly instead of ArseBreeze's 100% grade A full Gungan idiocy, you'd have this:

<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>

Code (markup):

And EVERYTHING else would be in your stylesheet WHERE IT BELONGS! Since presentation has ZERO flipping business in your markup...

Meesa sayz yew nevah goes FULL Gungan. Evaweebuddy noes dat. Jar Jar Binks? Stupid? Certainly. Clumsy? Absolutely. Annoying? You bet. But teh boy's a war hear-oh. That's not Gungan! Tailwind? They went FULL Gungan.

In any case, put overflow:auto on the DIV around the table, not the table itself. Again, tables aren't scroll targets.

 

use bootstrap framework for fast work. just call id and see builded table.