[삽질기록] Tailwind에서 w-1/3과 w-[33%]는 왜 다를까?

🚨 문제 상황

테이블 컬럼을 비율 단위(ex. w-1/16)로 설정했을 때, 전체 컬럼의 합이 1이지만 가로 스크롤이 생기는 현상이 발생했다.

<thead className="bg-white text-gray-500">
  <tr>
    <th className="w-1/16 px-4 py-2 whitespace-nowrap">리뷰 번호</th>
    <th className="w-4/16 px-4 py-2 whitespace-nowrap">체험학습명</th>
    <th className="w-2/16 px-4 py-2 whitespace-nowrap">작성자</th>
    <th
      className="w-2/16 px-4 py-2 cursor-pointer select-none whitespace-nowrap"
      onClick={() => onSort("rating")}
    >
      평점 <SortIcon sortKey={sortKey} sortOrder={sortOrder} target="rating" disabled={sortedReviews.length === 0} />
    </th>
    <th className="w-5/16 px-4 py-2">리뷰 내용</th>
    <th
      className="w-1/16 px-4 py-2 cursor-pointer select-none whitespace-nowrap"
      onClick={() => onSort("date")}
    >
      작성일 <SortIcon sortKey={sortKey} sortOrder={sortOrder} target="date" disabled={sortedReviews.length === 0} />
    </th>
    <th
      className="w-1/16 px-4 py-2 cursor-pointer select-none whitespace-nowrap text-center"
      onClick={() => onSort("reply")}
    >
      답변 여부 <SortIcon sortKey={sortKey} sortOrder={sortOrder} target="reply" disabled={sortedReviews.length === 0} />
    </th>
  </tr>
</thead>

---

🤔 원인

Tailwind의 fraction 단위(w-1/3, w-1/16 등)는 빌드 시점에 고정된 소수점 계산값으로 변환된다.

예를 들어 w-1/16은 실제로 아래와 같이 CSS로 바뀐다.

.w-1\/16 { 
    width: 6.25%; 
}

 

 

하지만 이런 수치를 여러 개 합치면 6.25 × 16 = 100.000000... 처럼 소수점 반올림 오차가 누적된다.
table-fixed는 각 셀의 폭을 강제로 합산하기 때문에, 이 오차가 합쳐지면 전체 폭이 100%를 초과하면서 overflow가 발생한다.
그 결과, 브라우저는 가로 스크롤을 생성한다.

---

🛠️ 해결 과정

fraction 대신 명시적인 % 단위를 사용하여 해결할 수 있었다.

 

<thead className="bg-white text-gray-500">
  <tr>
    <th className="w-[7%] px-4 py-2 whitespace-nowrap">리뷰 번호</th>
    <th className="w-[24%] px-4 py-2 whitespace-nowrap">체험학습명</th>
    <th className="w-[12%] px-4 py-2 whitespace-nowrap">작성자</th>
    <th
      className="w-[12%] px-4 py-2 cursor-pointer select-none whitespace-nowrap"
      onClick={() => onSort("rating")}
    >
      평점 <SortIcon sortKey={sortKey} sortOrder={sortOrder} target="rating" disabled={sortedReviews.length === 0} />
    </th>
    <th className="w-[26%] px-4 py-2">리뷰 내용</th>
    <th
      className="w-[10%] px-4 py-2 cursor-pointer select-none whitespace-nowrap"
      onClick={() => onSort("date")}
    >
      작성일 <SortIcon sortKey={sortKey} sortOrder={sortOrder} target="date" disabled={sortedReviews.length === 0} />
    </th>
    <th
      className="w-[9%] px-4 py-2 cursor-pointer select-none whitespace-nowrap text-center"
      onClick={() => onSort("reply")}
    >
      답변 여부 <SortIcon sortKey={sortKey} sortOrder={sortOrder} target="reply" disabled={sortedReviews.length === 0} />
    </th>
  </tr>
</thead>

 

이 방식은 Tailwind가 빌드 시 계산하지 않고, 브라우저가 렌더링 시점에 직접 계산하므로 반올림 오차가 사라지고 스크롤이 생기지 않는다.