JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="width-100-border">
<table>
  <thead>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </thead>
  <tbody>
    <td>111111111</td>
    <td>22</td>
    <td class="longtd">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p>
      <span class="span-class">Everything in this cell will show with line breaking except 'code block'. Everything in this cell will show with line breaking except 'code block'. Everything in this cell will show with line breaking except 'code block'.</span>
      
     <pre><div>I want to display this code without line break, with scroll bar (if the code is too long). I want this code block doesn't exceed 'width: 100%' (the green line in the demo)</div></pre>
      <p>Everything in this cell will show with line breaking except 'code block'. Everything in this cell will show with line breaking except 'code block'. Everything in this cell will show with line breaking except 'code block'.</p>
      
    </td>
  </tbody>
</table>
</div>

<ul>
  <li>The first two column have responsive size with their contents.<br />
  The contents of two columns are very short.</li>
  <li>The last column's width = 100% - width of (First + Second) column</li>
</ul>

SASS

// $div-width: 
.width-100-border
  width: 100%
  border: 1px solid #00FF00
  
table
  width: 100%
  // width: auto
  border: 1px solid #FF0000
  // table-layout: fixed
  td
    border: 1px solid #444444
    width: 1px
    // width: 100%
    pre
      background: black
      color: #999999
      div
        white-space: nowrap
        overflow-x: scroll
        width: 100%      
  th
    border: 1px solid #444444
    
.span-class
  // white-space: nowrap
  // display: block
  overflow: auto
  color: grey
 
.longtd
  overflow: auto
  max-width: 0;
  width: auto;
  
/* etc
  position: absolute
  white-space: nowrap
  overflow: auto
  text-overflow: ellipsis */