1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to make table with horizontal scrolling with tailwindcss 2.1?

Discussion in 'CSS' started by mstdmstd, Apr 18, 2021.

  1. #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
    SEMrush
    Pls, take look at pen: https://codepen.io/sergeynilov/pen/eYgjVgM


    I use tailwindcss 2.1.0.

    Thanks!
     
    mstdmstd, Apr 18, 2021 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,557
    Likes Received:
    1,942
    Best Answers:
    247
    Trophy Points:
    515
    #2
    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.
     
    deathshadow, Apr 19, 2021 IP
  3. Johan watic

    Johan watic Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    use bootstrap framework for fast work. just call id and see builded table.
     
    Johan watic, Nov 24, 2021 IP