英文:
How to get tables to grow infinitely off screen side by side instead of top and bottom with html and css
问题
我正在遍历用户对象，并希望使用 overflowX: "scroll" 让表格并排显示。
问题：
当我遍历表格时，它们只能以垂直堆叠的方式显示，而不是并排显示（请注意）。我希望表格在屏幕右侧显示，即第二个表格应该显示在屏幕右侧。
<div
style={{ display: "block", overflowX: "scroll", overflowY: "visible" }}
>
{wrestlersGrades.length
? wrestlersGrades.map((wrestler) => {
return (
<table>
<thead>
<tr>
<WrestlerTableHeader wrestler={wrestler} />
</tr>
</thead>
<tbody className=" ">
{/*<WrestlerTableBody wrestler={wrestler} />*/}
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>This is America</td>
<td>Hello </td>
<td>United States of America</td>
<td>This is America</td>
<td>Hello </td>
<td>United States of America</td>
<td>This is America</td>
<td>Hello </td>
<td>United States of America</td>
</tr>
</tbody>
</table>
);
})
: null}
</div>
英文:
I am mapping through user object and want tables to display side by side using overflowX: "scroll"
The Problem:
When I am mapping through the tables I am only able to get them to display one on top of the other and not side by side (Please note) I want the tables to display off screen. Meaning the second table should display to the right off the screen.
Code Sandbox link
<div
style={{ display: "block", overflowX: "scroll", overflowY: "visible" }}
>
{wrestlersGrades.length
? wrestlersGrades.map((wrestler) => {
return (
<table>
<thead>
<tr>
<WrestlerTableHeader wrestler={wrestler} />
</tr>
</thead>
<tbody className="">
{/*<WrestlerTableBody wrestler={wrestler} />*/}
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>This is America</td>
<td>Hello </td>
<td>United States of America</td>
<td>This is America</td>
<td>Hello </td>
<td>United States of America</td>
<td>This is America</td>
<td>Hello </td>
<td>United States of America</td>
</tr>
</tbody>
</table>
);
})
: null}
</div>
答案1
得分: 1
使用flex属性的最简单解决方案：代码沙盒
英文:
The easiest solution with flex: Code sandbox
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论