【发布时间】:2022-05-07 15:23:33
【问题描述】:
我有一个结构有点复杂的表,因为它有 colspan 和多个标题。我需要修复我的表格前两列,其余部分应该可以水平滚动。我尝试了各种示例来冻结列,但没有按预期工作。以下是我提到的链接。
我希望在活动和指标描述标题下修复所有内容
<table class="Fixed" border="1" width="auto;" style="table-layout:fixed">
<tr style="background: rgb(22, 50, 92);">
<th rowspan="2" colspan="2" style="color:#FFFFFF;width: 18%;text-align: center;">Activity and indicator description</th>
<th style="color:#FFFFFF;width: 5%;text-align: center;"></th>
<th style="color:#FFFFFF;width: 7%;text-align: center;" colspan="2">FY2021</th>
<th style="color:#FFFFFF;width: 25%;text-align: center;" colspan="8">FY2022</th>
<th style="color:#FFFFFF;width: 25%;text-align: center;" colspan="8">FY2023</th>
<th style="color:#FFFFFF;width: 25%;text-align: center;" colspan="8">FY2024</th>
<th style="color:#FFFFFF;width: 7%;text-align: center;" colspan="2">Cumulative</th>
</tr>
<tr style="background: rgb(22, 50, 92);">
<td style="color:#FFFFFF;text-align: center;"></td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 4</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 1</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 2</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 3</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 4</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 1</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 2</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 3</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 4</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 1</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 2</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 3</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 4</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2"> Life of project</td>
</tr>
<tr style="background: rgb(22, 50, 92);">
<td style="color:#FFFFFF;text-align: center;">Activity</td>
<td style="color:#FFFFFF;text-align: center;">Indicator</td>
<td style="color:#FFFFFF;text-align: center;">Baseline</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
</tr>
<tr>
<th style="font-style: italic;">Project Objective 1: Identify and support nascent and grassroots CSOs, activists, and community networks in Latin America and the Caribbean. </th>
</tr>
<tr>
<td>1.1: Identify grassroots CSOs, activists, and community networks throughout the LAC region.</td>
<td>1.1.1: Number of new actors (organizations and individuals) across the region identified</td>
<td style="text-align: center;">-</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">150</td>
<td style="text-align: center;">0</td>
</tr>
<tr>
<td rowspan="2">1.2: Conduct annual virtual Innovation Labs.</td>
<td>1.2.1: Number of individuals or organizations selected to participate in innovation labs </td>
<td style="text-align: center;">-</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">150</td>
<td style="text-align: center;">0</td>
</tr>
</table>
【问题讨论】:
-
把它放在一个代码sn-p中
-
是的,你应该让它成为一个可运行的sn-p,这样人们就可以看到这里的东西;还包括文档的更多而不仅仅是表格,因为除非
<table>是<body>内的only东西,否则不同的解决方案会对<table>周围的东西。您是否只是想以一种很好的方式展示这张桌子?或者您是否正在构建一个基于新信息动态再现表格的脚本;还是这个表只是在另一个程序中导出的结果(如果是的话,你是否必须经常重复它) -
我问最后一点的原因是,看到如此多的 CSS 内联到 HTML 中而不是使用样式表是很奇怪的(更不用说几个老式的 html 样式属性)。它暗示要么是由某些程序中的
File->Save as .html功能生成的;或作为电子邮件信息的一部分;或者只是在 Airwolf 还在电视上流行的时候写的。 -
@Raxi 是的,我使用了内联 CSS,因为那不是最终版本。 PS 我知道这是一个老派的 html 样式,但让我们进入主要问题。 :)
-
是的,老派的事情不是问题;更多地作为询问表格上下文的催化剂;内联 CSS 的问题更大,因为它让更改布局非常痛苦(因为任何更改都必须手动应用到 50 个位置)。
标签: html css html-table