Question

我使用代码创建标题冻结表，但是两个表的宽度都不匹配。这是代码

<div id="view_feedback_table">
<table id="crosstable"  border =1  cellpadding="6px" style="margin-top: 30px;TEXT-ALIGN: left;float:left;width:1200px;BORDER-COLLAPSE: collapse;">
<thead>
<tr>
<th colspan="9" style="text-align: center;">
<span style="color: #1b4a84;font-size: 14px;font-weight: 900;">Response</span>
</th>
<th style="text-align: right;">
Download
</th>
</tr>
<tr style="color: white; background-color: rgb(31, 73, 125);">
<th style="width: 10%;">Activity Code</th>
<th style="width: 10%;">No of Completed Associates</th>
<th style="width: 10%;">No of Participants Submitted Feedback</th>
<th style="width: 7%;">Instructor</th>
<th style="width: 7%;">Courseware</th>
<th style="width: 7%;">Environment</th>
<th style="width: 8%;">Learner Support</th>
<th style="width: 7%;">Overall</th>
<th style="width: 10%;">Overall Activity Feedback</th>
<th style="width: 8%;">Overall Activity NPS</th>
</tr>
</thead>
</table>
<table id="crosstable" border =1 cellpadding="6px" style="TEXT-ALIGN: left;float:left;width:1200px;BORDER-COLLAPSE: collapse;display: block;max-height: 50px;overflow-y: auto;">
<tbody>
<tr style="color: rgb(31, 73, 125); background-color: white;">
<td style="width: 10%;">
Activity_Code1
</td>
<td style="width: 10%;">No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td style="width: 10%;">No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td style="width: 7%;">Instructor</td>
<td style="width: 7%;">Courseware</td>
<td style="width: 7%;">Environment</td>
<td style="width: 8%;">Learner_
<wbr>Support
</td>
<td style="width: 7%;">Overall</td>
<td style="width: 10%;">Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td style="width: 8%;">Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
<tr style="color: rgb(31, 73, 125); background-color: rgb(220, 230, 241);">
<td>
Activity_Code2
</td>
<td>No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td>No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td>Instructor</td>
<td>Courseware</td>
<td>Environment</td>
<td>Learner_
<wbr>Support
</td>
<td>Overall</td>
<td>Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td>Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
<tr style="color: rgb(31, 73, 125); background-color: white;">
<td>
Activity_Code3
</td>
<td>No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td>No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td>Instructor</td>
<td>Courseware</td>
<td>Environment</td>
<td>Learner_
<wbr>Support
</td>
<td>Overall</td>
<td>Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td>Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
</tbody>
</table>
</div>

任何使此正确的建议。我需要冻结标题效果，因此不能使用同一张表来调整宽度。

感谢它的工作，但是当自动滚动进入图片时，仍然存在一些小的对齐问题。有什么办法也可以在代码中调整该代码。

Answer 1

<div style="position: fixed;background:#fff;z-index: 999;">
    <table id="crosstable" cellpadding="6px" border=1 style="margin-top: 30px;TEXT-ALIGN: left;width:1200px;">
        <tbody>
        <tr>
            <td colspan="9" style="text-align: center;">
                <span style="color: #1b4a84;font-size: 14px;font-weight: 900;">L1 Feedback Response</span>
            </th>
            <td style="text-align: right;">
                <a onclick="download excel(&quot;default&quot;,&quot;default&quot;,&quot;AC&quot;)">
                <img src="/pentaho-style/1235/images/excel icon.png" title="Download" style="height: 24px;">
                </a>
            </th>
        </tr>
        <tr style="color: white;background-color: rgb(31, 73, 125);/* position: fixed; */">
            <td style="width: 10%;">Activity Code</th>
            <td style="width: 10%;">No of Completed Associates</th>
            <td style="width: 10%;">No of Participants Submitted Feedback</th>
            <td style="width: 7%;">Instructor</th>
            <td style="width: 7%;">Courseware</th>
            <td style="width: 7%;">Environment</th>
            <td style="width: 8%;">Learner Support</th>
            <td style="width: 7%;">Overall</th>
            <td style="width: 10%;">Overall Activity Feedback</th>
            <td style="width: 8%;">Overall Activity NPS</th>
        </tr>
        </tbody>
    </table>
</div>

<div style="padding-top:125px;">
    <table id="crosstable" cellpadding="6px" border=1 style="TEXT-ALIGN: left;max-height: 500px;width:1200px;">
        <tbody>
        <tr style="color: rgb(31, 73, 125); background-color: white;">
            <td  style="width: 10%;">
                Activity Code2
            </td>
            <td  style="width: 10%;">No_<wbr>of_<wbr>Completed_<wbr>Associates</td>
            <td  style="width: 10%;">No_<wbr>of_<wbr>Participants_<wbr>Submitted_<wbr>Feedback</td>
            <td style="width: 7%;">Instructor</td>
            <td  style="width: 7%;">Courseware</td>
            <td style="width: 7%;">Environment</td>
            <td style="width: 8%;">Learner_<wbr>Support</td>
            <td style="width: 7%;">Overall</td>
            <td style="width: 10%;">Overall_<wbr>Activity_<wbr>Feedback</td>
            <td style="width: 8%;">Overall_<wbr>Activity_<wbr>NPS</td>
        </tr>
        </tbody>
    </table>
</div>

<td>带有No_of_Participants_Submitted_Feedback之类的带有“下划线”的内容是坚不可摧的，因此它将推动列的宽度。因此，您可能想使用空格而不是下划线。

如果必须有下划线，请在每个下划线之后添加，例如No_of_Participants_Submitted_Feedback。

还要注意，您错过了%中的<td style="width: 7;">Environment</td>。

只需执行此操作，您就会看到结果有很大的变化，然后可以调整代码以使其完美匹配。

在下面添加新表以显示效果（如冻结窗格）时，HTMl表宽度问题

1 个答案: