React+Tailwind CSS表格col-span无法占满12列问题解决

使用React + Tailwind开发表格时，设置lg:col-span-8显示正常，但设为11或12时，表格无法占满12列，最多仅占10列，甚至会被压缩成1列。

原代码 #

<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>;

修复方案 #

1. 移除无效的col-span类 #

col-span是Grid布局专属类，仅对Grid容器的直接子元素生效。你给<table>、<thead>、<tbody>都加了lg:col-span，这些完全无效，还会干扰布局，只需要在最外层的<div>上保留该类即可。

2. 修正中间容器的inline-block属性 #

<div className="align-middle inline-block min-w-full">中的inline-block会让容器收缩到内容宽度，导致表格无法撑满空间，把它改成block或者直接移除这个冗余容器。

3. 确保父容器是Grid布局 #

最外层<div>的父元素必须带有grid grid-cols-12类，否则lg:col-span-12不会生效。如果父元素不是Grid容器，需要补充对应的Grid类。

修复后的代码 #

<div className={`flex flex-col lg:col-span-${order.smopen ? 8 : 12}`}>
  <div className="overflow-x-auto">
    <div className="align-middle block min-w-full">
      <div className="shadow overflow-hidden border-b border-gray-200">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50 divide-y divide-gray-200">
            <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="bg-white divide-y divide-gray-200">
            {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>

内容的提问来源于stack exchange，提问作者Gleb