How can i get rid of the x-axis scroll

https://play.tailwindcss.com/AvdfjhjNEr

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
    <title>Document</title>
  </head>
  <body>
    <table>
      <tr>
        <th class="w-4/12 border-2 border-block">Country</th>
        <th class="w-4/12 border-2 border-block">Company</th>
        <th class="w-4/12 border-2 border-block">Contact</th>
      </tr>
      <tr>
        <td class="border-2 border-block">Alfreds Futterkiste</td>
        <td class="border-2 border-block">
          <div class="w-full h-5 overflow-y-auto">
		      Maria Andersaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
          </div>   
        </td> 
        <td class="border-2 border-block">Germany</td>
      </tr>
      <tr>
        <td class="border-2 border-block">Centro comercial Moctezuma</td>
        <td class="border-2 border-block">Francisco Chang</td>
        <td class="border-2 border-block">Mexico</td>
      </tr>
    </table>
  </body>
</html>

tykus

4 years ago

Best Answer

Level 104

This should be enough with what you already have:

<table class="table-fixed w-full">

zaster

4 years ago

Level 9

Thank You @tykus

Please or to participate in this conversation.