时间戳

首页 > 解决方案 > 打印时需要控制表格列的宽度

html - 打印时需要控制表格列的宽度

问题描述

我在我的 Visualforce 页面中使用 Bootstrap，并且在生成 Vf 页面时表格看起来还不错。

我需要使用 ctrl+P 打印它，但是当其中一个列值（名称）变得太大时，表格在打印中被截断。

所以我添加了表格固定布局和自动换行。

现在它可以正常工作了，但是现在所有列的宽度都相同，序列号和名称的宽度相同，这看起来很尴尬。

链接中的表格图像

桌子

<div class="row" style="padding-bottom:20px;">
    <div class="col-md-12">
        <table class="table table-sm table-bordered">
            <thead>
                <tr style="background-color:#00205b">
                    <th style="color:#ffffff;border-bottom-color:#bf0d3e;" rowspan="2">#</th>
                    <th style="color:#ffffff;border-bottom-color:#bf0d3e;" rowspan="2">Employee/Dependent</th>
                    <th style="color:#ffffff;border-bottom-color:#bf0d3e;" rowspan="2">Relationship</th>
                    <apex:repeat value="{!planMetadataMap }" var="planName">
                        <th style="color:#ffffff;text-align:center;" colspan="2" rowspan="1">{!planName}</th>
                    </apex:repeat>
                </tr>
                <tr style="background-color:#00205b">
                    <apex:repeat value="{!planMetadataMap}" var="planMeta">
                        <apex:repeat value="{!planMetadataMap[planMeta]}" var="planMetavalue">
                            <th style="color:#ffffff;border-bottom-color:#bf0d3e;" rowspan="1">{!planMetavalue}</th>
                        </apex:repeat>
                    </apex:repeat>
                </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!qliWrapperMainList}" var="qliWrapperlist">
                    <apex:repeat value="{!qliWrapperlist}" var="qliWrapper">
                        <tr style="background-color:#fafafa">
                            <td>{!qliWrapper.seq_number}</td>
                            <apex:outputPanel rendered="{!(qliWrapper.relation==null)}">
                                <td>{!qliWrapper.Name}</td>
                            </apex:outputPanel>
                            <apex:outputPanel rendered="{!(qliWrapper.relation!=null)}">
                                <td style="padding-left:20px;">-&nbsp;{!qliWrapper.Name}</td>
                            </apex:outputPanel>
                            <td>{!qliWrapper.relation}</td>
                            <apex:repeat value="{!planMetadataMap}" var="planMain">
                                <apex:repeat value="{!planMetadataMap[planMain]}" var="mapSubPlan">
                                    <td>${!qliWrapper.planMap[planMetadataMap[planMain][mapSubPlan]]}</td>
                                </apex:repeat>
                                </apex:repeat>
                        </tr>
                    </apex:repeat>
                    <tr>
                        <td style="border-bottom-color:#533278;"></td>
                        <td style="border-bottom-color:#533278;"></td>
                        <td style="border-bottom-color:#533278;text-align:right">Family Total</td>
                        <apex:repeat value="{!planMetadataMap}" var="planMain">
                            <apex:repeat value="{!planMetadataMap[planMain]}" var="mapSubPlan">
                                <td style="border-bottom-color:#533278;text-align:right">${!qliWrapperlist[0].planTotal[planMetadataMap[planMain][mapSubPlan]]}</td>
                            </apex:repeat>
                        </apex:repeat>
                    </tr>
                </apex:repeat>
            </tbody>
        </table>
    </div>

为打印添加的代码：-

<style>
@media print {
.table th { word-wrap: break-word;  background-color: #eeeeee 
   !important; color: #333333 !important; }
          .table td { word-wrap: break-word;  background- 
          color: #ffffff !important; color: #333333 
        !important; }
.table { table-layout: fixed !important; }
 }
</style>

标签： htmltwitter-bootstrapprintinghtml-table

解决方案

如果愿意，您可以将任何 td 的 with 设置为 XYZ。然后单词会中断，并且表格适合打印页边距。

例如：

<style>
@media print {
    .table th { 
        word-wrap: break-word;  
        background-color: #eeeeee !important;
        color: #333333 !important; 
    }
    .table td {
        max-width:10%;
        background-color: #ffffff !important;
        color: #333333 !important; 
    }
    .table { 
        table-layout: fixed !important; 
    }
}
</style>

推荐阅读