I have created a table using “table-layout: fixed” in my Visualforce page. However, when I view the page, the content overflows beyond the table, instead of wrapping within the table cell as shown in the image. I have attempted to address this issue by applying CSS properties like “word-break: break-all,” but unfortunately, it hasn’t resolved the problem. I am seeking assistance from anyone who might be able to help me with this situation.
<apex:page showHeader="false" applyBodyTag="false" renderAs="pdf" standardStylesheets="false" controller="TestContoller">
<head>
<style>
@page {
size: A4 landscape;
margin-right: 7mm;
margin-left: 7mm;
margin-bottom: 50px;
font-family: Helvetica;
height : 100%;
@top-center {
content: "";
}
}
body {
font-family: Arial Unicode MS;
padding-top : 50px;
}
caption {
padding: 10px;
font-size: 40px;
background-color: #4A86E8;
color: white;
font-weight: bold;
}
.my_table{]
width:100%;
height : 100%;
border: 1px solid;
border-collapse : collapse;
}
td,th {
height:70px;
border: 2px solid black;
padding: 10px;
text-align : center;
}
.tr1 th {
font-size:18px;
font-weight:bold;
}
.tr1 td {
color : blue;
font-size : 15px;
}
.tr2 td {
font-size:13px;
font-weight:bold;
height:70px;
background-color : #D9EAD3
}
.tr3 th {
font-size:12px;
font-weight:bold;
}
.tr3 td{
color:blue;
}
.tr4 th {
font-size:12px;
font-weight:bold;
}
.tr4 td{
color:blue;
}
.tr5 th {
font-size:15px;
font-weight:bold;
}
.tr5 td{
color:red;
}
.page-break{
display:block;
page-break-after:always;
}
</style>
</head>
<apex:repeat value=”{!Result}” var=”record” id=”theRepeat”>RESULT (Date) {!record[‘IncFptDate__c’]}
(Client name) {!record[‘IncFptDisCom__c’]}
(Sample No.) {!record[‘IncFptSampleNo__c’]} (Flash point) (degC) pH (Toxic gas possibility) (Calorific value) (kcal/kg) (Other ccomments) (Threshold) (Threshold) (Threshold) {!record[‘IncCal__c’]} (Analysis) {!record[‘IncFptFlashPoint__c’]} (Analysis) {!record[‘IncFptpH__c’]} (Analysis) {!record[‘CheckToxisGas__c’]} (Flash point) {!record[‘FlashPoint_text’]} (Special comments) pH {!record[‘FlashPoint_ph_text’]} {!record[‘IncFptNote__c’]} (Toxic gas possibility) {!record[‘FlashPoint_Toxis_text’]}
</apex:repeat>
</apex:page>
public with sharing class TestContoller {
public String param1 { get; set; }
public List<String> printIds { get; set; }
public List<Map<String, Object>> Result { get; set; }
public TestContoller() {
this.param1 = ApexPages.currentPage().getParameters().get('param1');
initializeResult();
}
private void initializeResult() {
Map<String, Object> paramDetails = (Map<String, Object>)JSON.deserializeUntyped(this.param1);
if (paramDetails.containsKey('ids') && paramDetails.get('ids') instanceof List<Object>) {
this.printIds = new List<String>();
for (Object idObj : (List<Object>)paramDetails.get('ids')) {
if (idObj instanceof String) {
this.printIds.add((String)idObj);
}
}
}
if (this.printIds != null && !this.printIds.isEmpty()) {
List<IncFingerPrintTest__c> TestRecords = [
SELECT Id, IncFptDate__c, IncFptDisCom__c, IncFptDisCom__r.name, IncFptSampleNo__c,
IncFptFlashPoint__c, IncFptpH__c, IncCal__c, CheckToxisGas__c,IncFptNote__c
FROM IncFingerPrintTest__c
WHERE Id IN :this.printIds
];
this.Result = new List<Map<String, Object>>();
for (IncFingerPrintTest__c record : TestRecords) {
Map<String, Object> detailMap = new Map<String, Object>{
'IncFptDate__c' => record.IncFptDate__c != null ? (record.IncFptDate__c).year()+' - '+(record.IncFptDate__c).month()+' - '+ (record.IncFptDate__c).day(): 'ㅤ',
'IncFptDisCom__c' => record.IncFptDisCom__r.name != null ? String.valueOf(record.IncFptDisCom__r.name) : 'ㅤ',
'IncFptSampleNo__c' => record.IncFptSampleNo__c != null ? String.valueOf(record.IncFptSampleNo__c) : 'ㅤ',
'IncCal__c' => record.IncCal__c != null ? String.valueOf(record.IncCal__c) : 'ㅤ',
'IncFptFlashPoint__c' => record.IncFptFlashPoint__c != null ? String.valueOf(record.IncFptFlashPoint__c) : 'ㅤ',
'IncFptpH__c' => record.IncFptpH__c != null ? String.valueOf(record.IncFptpH__c) : 'ㅤ',
'IncFptNote__c' => record.IncFptNote__c != null ? String.valueOf(record.IncFptNote__c) : 'ㅤ','CheckToxisGas__c' => record.CheckToxisGas__c != null ? String.valueOf(record.CheckToxisGas__c) : 'ㅤ'
};
if (record.IncFptFlashPoint__c != null && record.IncFptFlashPoint__c <= 22.5) {
detailMap.put('FlashPoint', 'font-size: 15px; padding: 10px; text-align: center; background-color: #f4c7c3;');
detailMap.put('FlashPoint_text', 'No');
} else {
detailMap.put('FlashPoint', 'ㅤ');
detailMap.put('FlashPoint_text', 'ㅤ');
}
if (record.IncFptpH__c != null && record.IncFptpH__c <= 3) {
detailMap.put('FlashPoint_ph_text', 'a');
} else if (record.IncFptpH__c != null && record.IncFptpH__c >= 7) {
detailMap.put('FlashPoint_ph_text', 'b');
}else{
detailMap.put('FlashPoint_ph_text', 'OK');
}
if (record.CheckToxisGas__c != null && record.CheckToxisGas__c == 0) {
detailMap.put('FlashPoint_Toxis_text','OK');
}else{
detailMap.put('FlashPoint_Toxis_text', 'ㅤ');
}
this.Result.add(detailMap);
}
}
}
}
