Why isn't col-span spanning the full table width - reactjs

Question

This is my table code, using React and Tailwind CSS. There is one peculiarity: when col-span turns 8, it works as expected. But when it turns 12, it breaks.
I want the table to expand to 12 cols, but it only expands to 10. If I use 11 or 12 it goes to 1, no matter what I used for colspan.
<div className={`flex flex-col lg:col-span-${order.smopen ? 8 : 12}`}>
<div className="overflow-x-auto">
<div className="align-middle inline-block min-w-full">
<div className="shadow overflow-hidden border-b border-gray-200">
<table
className={`min-w-full divide-y divide-gray-200 lg:col-span-${
order.smopen ? 8 : 12
}`}
>
<thead
className={`min-w-full divide-y divide-gray-200 lg:col-span-${
order.smopen ? 8 : 12
}`}
>
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Тема
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Дедлайн
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Статус
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
Сумма
</th>
</tr>
</thead>
<tbody
className={`min-w-full divide-y divide-gray-200 lg:col-span-${
order.smopen ? 8 : 12
}`}
>
{orders.map((order, orderIdx) => (
<tr
onClick={() =>
orderDispatch({
type: "selected",
payload: {
smopen: true,
title: order.title,
dateDeadline: new Date(order.dateDeadline).toLocaleString(
"ru-RU",
{
year: "numeric",
month: "long",
day: "numeric",
}
),
status: order.status,
sum: order.sum,
},
})
}
key={order.id}
className={
orderIdx % 2 === 0
? "bg-white hover:bg-gray-100 cursor-pointer transition-all ease-in-out"
: "transition-all ease-in-out cursor-pointer bg-gray-50 hover:bg-gray-100"
}
>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
{order.title}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{new Date(order.dateDeadline).toLocaleString("ru-RU", {
year: "numeric",
month: "long",
day: "numeric",
})}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{orderTypeSwitch(order.status)}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{order.sum} ₽
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>;
How can I fix this to have my table span the whole 12 columns?