如何将动态表格设置为可滚动的动态固定大小，由视口和相邻 div 确定？
问题描述 投票：0回答：1
我使用 Preact 与 Tailwind 和 daisyUI 来制作我的应用程序。这个想法是屏幕将有两个选项卡，每个选项卡左侧有一个文本区域，右侧有说明/结果。
我使用 daisyUI 的 radio tab lift + tab content 进行选项卡，以及 Tailwind 的
columns-2<div role="tablist" className="tabs tabs-lifted tabs-lg">
<input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 1" />
<div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6 columns-2">
<Tab1 />
</div>
<input type="radio" name="my_tabs_2" role="tab" className="tab" aria-label="Tab 2" checked />
<div role="tabpanel" className="tab-content bg-base-100 border-base-300 rounded-box p-6 columns-2">
<Tab2 />
</div>
</div>
我的问题主要出现在选项卡 2 中，其中左侧有一个文本区域，右侧有一个表格。它的行数和列数会有所不同。我使用这个 daisyUI 的 table 与 pinned-rows 和 pinned-cols 代码：
<textarea
rows={15}
cols={40}
/><br />
<div className="overflow-x-auto">
<table className="table table-xs table-pin-rows table-pin-cols">
...
当还没有表格可显示时，结果如预期：
但是，当表格出现时，它被推得很远，并且选项卡标签宽度也缩小了：
如果我不使用
columns-2grid grid-cols-4
即使我尝试
flex shrink w-30我尝试从开发工具中禁用所有样式，但仍然无法找出这些行为的原因。
我的目标是将所有内容都集中在一个屏幕上：
- 表格宽度与屏幕其余宽度固定，
- 表格高度不限，但最大等于文本区域
- 有固定高度的页脚。文本区域高度应填充选项卡名称和页脚之间的间隙
- 在手机上，表格应位于文本区域下方。宽度应该是固定的并且可以滚动，而高度没有限制
- （可选）文本区域和表格的宽度和谐划分：如果它们的总和小于视口宽度，则两者之间的比例应等于黄金比例和屏幕中心。如果不是，则文本区域的最小宽度应为 40。
我猜这些可以通过flex或grid来实现，但首先我需要解决上述问题。
1个回答
1
投票
投票
考虑拥有具有网格布局的
.tab-content.tab-contentdisplaydisplay我们可以应用类似
grid-template-columns: auto 1fr<textarea><script src="https://cdn.tailwindcss.com/3.4.1"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<div role="tablist" class="tabs tabs-lifted tabs-lg">
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
Tab 1
</div>
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
<div class="grid grid-cols-1 min-[500px]:grid-cols-[min-content_1fr] gap-5">
<textarea rows="15" cols="40"></textarea>
<div class="overflow-x-auto">
<table class="table table-xs table-pin-rows table-pin-cols">
<!-- head -->
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>为了让表格的高度最大与
<textarea><textarea>500pxoverflow-x: autooverflow: auto<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<div role="tablist" class="tabs tabs-lifted tabs-lg">
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
Tab 1
</div>
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
<div class="grid grid-cols-1 min-[500px]:grid-cols-[min-content_1fr] gap-5">
<textarea rows="15" cols="40"></textarea>
<div class="relative">
<div class="min-[500px]:absolute inset-0 overflow-auto">
<table class="table table-xs table-pin-rows table-pin-cols">
<!-- head -->
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>理想情况下，StackOverflow 应该只关注一个问题，所以我不应该解决有关页脚布局的查询，但我离题了。
我们可以使用垂直柔性布局来确保
<textarea>.tabs.tab-content<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
<div class="flex flex-col min-h-screen">
<div role="tablist" class="tabs tabs-lifted tabs-lg grow grid-rows-[max-content]">
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1" />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 min-h-0 self-stretch">
Tab 1
</div>
<input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2" checked />
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 min-h-0 self-stretch">
<div class="grid grid-cols-1 min-[500px]:grid-cols-[min-content_1fr] gap-5 h-full">
<textarea rows="15" cols="40" class="h-full"></textarea>
<div class="relative">
<div class="min-[500px]:absolute inset-0 overflow-auto">
<table class="table table-xs table-pin-rows table-pin-cols">
<!-- head -->
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Job</th>
<th>Favorite Color</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
<!-- row 1 -->
<tr>
<th>1</th>
<td>Cy Ganderton</td>
<td>Quality Control Specialist</td>
<td>Blue</td>
</tr>
<!-- row 2 -->
<tr>
<th>2</th>
<td>Hart Hagerty</td>
<td>Desktop Support Technician</td>
<td>Purple</td>
</tr>
<!-- row 3 -->
<tr>
<th>3</th>
<td>Brice Swyre</td>
<td>Tax Accountant</td>
<td>Red</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<footer>footer</footer>
</div>最新问题
- Android Google Play 服务错误：在路径 dexpathlist 上找不到类 com.google.android.gms.maps.mapfragment
- Selenium select点击拦截。 Select.select_by_value()
- 如何在glitch.com上安装旧的puppeteer？
- OpenAI 聊天集成 openai >1.0 - 性能
- Unity Vuforia 错误：无法为目标创建预览
- Outlook 2007 加载项内存泄漏？
- 无法通过php中的按钮打开模态框
- 在python中部署selenium/flask/docker脚本
- 如何正确创建 Python 正则表达式以允许字母数字字符、逗号、点、空格
- 如何在旧主机上访问旧网站？
- 可以通过编程方式“立即”触发通知吗？
- svg 中模糊圆圈的渲染错误
- MongoDB中如何过滤分组聚合的结果？
- Visual Studio Code 将选择范围扩展到行？
- Qt 和 opengl api ： #error OpenGL header已经包含，删除这个包含，很高兴已经提供了它
- SwiftUI 中的列表问题
- 任务“:app:processDebugGoogleServices”执行失败。 > 找不到包名称“com.example.myapp”的匹配客户端
- 通过触发器触发的 Google Apps 脚本不再运行
- ROS2 cpp 文件，colcon 构建一直失败
- Mapstruct 映射嵌套类问题
© www.soinside.com 2019 - 2024. All rights reserved.