Переполнение таблицы в контейнере div

Если я правильно понял вашу проблему, вы ожидаете, что таблица поместится в родительский div без горизонтальной прокрутки.

Проблема в том, что по умолчанию браузеры пытаются вычислить ширину столбцов таблицы автоматически, основываясь на содержимом. Но если вы хотите, вы можете определить ширину столбцов в коде. Подробнее об этом читайте на сайте CSSWG.

С помощью TailwindCSS вы можете добавить класс table-fixed в таблицу, согласно документам Tailwind Table Layout . Но не забудьте добавить ширину столбцам, например. с w-классами. Это может выглядеть так:

export const PlantServiceOrders = () => {
  return (
    <div className = "w-full bg-white mb-6 shadow-lg rounded">
      <div className = "w-full p-4">
        <h3>Ordenes de Servicio por completar</h3>
      </div>
      <div className = "max-w-full overflow-x-scroll">
        <table className = "w-full table-fixed border-collapse">
          <thead className = "text-left">
            <tr className = "[&>*]:px-6 [&>*]:bg-gray-100 [&>*]:text-gray-500 [&>*]:border [&>*]:border-solid [&>*]:border-gray-200 [&>*]:py-3 [&>*]:text-xs [&>*]:uppercase [&>*]:border-l-0 [&>*]:border-r-0 [&>*]:whitespace-no-wrap [&>*]:font-semibold [&>*]:text-center">
              <th className = "w-24">folio</th>
              <th className = "w-16">planta</th>
              <th className = "w-32">cliente</th>
              <th className = "w-32">número parte</th>
              <th className = "w-32">nombre parte</th>
              <th className = "w-32">defecto</th>
              <th className = "w-32">contacto</th>
              <th className = "w-32">email</th>
              <th className = "w-32">teléfono</th>
              <th className = "w-24">fecha inicio</th>
              <th className = "w-32"></th>
            </tr>
          </thead>
          <tbody className = "align-top break-words">
            <tr className = "hover:bg-gray-200 [&>*]:border-t-0 [&>*]:px-6 [&>*]:align-middle [&>*]:border-l-0 [&>*]:border-r-0 [&>*]:text-xs [&>*]:whitespace-no-wrap [&>*]:p-4">
              <td>XXXXXXX</td>
              <td>XXXXX</td>
              <td>XXXXX XXXXXX XXXX XX XXXX </td>
              <td>XXXXXXXXXX</td>
              <td>XXXXX XXXX XXXXXXX </td>
              <td>XXXXXX XX XXXXX </td>
              <td>XXXXXX XXXXX </td>
              <td>XXXXXXXXXXXXXXXXXXXXXX </td>
              <td>XXXXXXXXXX</td>
              <td>XXXX-XX-X </td>
              <td>
                <button className = "text-white text-md bg-green-600 hover:bg-green-700 rounded-lg py-2 px-4 cursor-pointer font-semibold">
                  Completar
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};