我正在尝试截断表格中的某些文本，但是没有按预期的方式工作。有人能给我解释一下我做错了什么吗？
编辑：我想保持表格宽度为max-width: 100%;

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-56 overflow-x-hidden">
  <div class="table max-w-full border-spacing-y-5 border border-red-200">
    <div class="table-row"> 
      <div class="table-cell whitespace-nowrap pr-5 border border-blue-200">
        This
      </div>
      <div class="table-cell pr-5 border border-green-200">
        is 
      </div>
      <div class="table-cell pr-5 border border-orange-200">
        the
      </div>
      <div class="table-cell border border-purple-200 overflow-y-hidden">
        <div class="flex">
          <span class="truncate">text to truncate</span>
        </div>
      </div>
    </div>
  </div>
</div>

<p>Expected Results:</p>

<div class="flex w-36">
  <span class="truncate">This is the text to truncate</span>
</div>