Необходимо контролировать ширину столбца таблицы при печати - PullRequest
Новая
       30

Необходимо контролировать ширину столбца таблицы при печати

0 голосов
/ 15 октября 2019

Я использую Bootstrap на моей странице Visualforce, и таблица выглядит хорошо, когда генерируется страница 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>

1 Ответ

0 голосов
/ 16 октября 2019

вы можете установить с любого td на 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>
...