顺风台溢出-x-汽车不工作
顺风台溢出-x-汽车不工作
提问于 2022-07-29 08:26:03
我把桌子做得像下面这样。
我放overflow-x-auto不是为了挤压所有内容，而是制作卷轴。
<table className="border-collapse overflow-x-auto">
<tbody className="overflow-x-auto">
<tr>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">순위</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-2 text-left text-sm">이름</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">나이</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">출생년도</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">생일</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">성별</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">핸드폰 번호</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">거주 지역</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">소속 기관</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">점수</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">일상</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">시</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">댓글</th>
<th className="border-b-2 border-slate-700 justify-center items-center px-5 py-1 text-left text-sm">좋아요</th>
</tr>
{ loading ? data.map((item, index) => tablemap(item, index)) : null}
</tbody>
</table> 但是，正如您在下面看到的，它挤压所有的内容，而不是使滚动。
我还将overflow-x-auto应用于顶级父级div。
但也不起作用。
有什么问题吗？
回答 1
Stack Overflow用户
发布于 2022-08-02 08:00:46
这个怎么样？您可以使用w-屏幕(全屏)或w-90vw控制宽度。
<div className="w-screen overflow-y-hidden overflow-x-scroll">
<table className="border-collapse">
<tbody className="">
<tr>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
순위
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-2 text-left text-sm">
이름
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
나이
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
출생년도
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
생일
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
성별
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
핸드폰 번호
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
거주 지역
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
소속 기관
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
점수
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
일상
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
시
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
댓글
</th>
<th className="items-center justify-center border-b-2 border-slate-700 px-5 py-1 text-left text-sm">
좋아요
</th>
</tr>
{ loading ? data.map((item, index) => tablemap(item, index)) : null}
</tbody>
</table>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73163722
复制相关文章
相似问题
腾讯云开发者
