Help with lining up tables and making them the same size

Hello, I'm working on a visualforce page and I can't seem to get my tables to line up the way I want them to. I've had some success, but am just having trouble finishing it off.

I need it to look like this:
User-added image

But so far I have only managed to make it look like this:
User-added image

Here is the HTML

<table class="Cx" width="98.7%">
        <tr><td class="tac rPad" colspan="4"><strong>Telco Info</strong></td></tr>
        <tr><td class="tar rPad">Sales Order:</td><td>company name</td></tr>
        <tr><td class="tar rPad">Sales Rep:</td><td>Rebiller Group</td><td>TN:</td><td>1-800-555-5555</td></tr>
        <tr><td class="tar rPad">E-Mail:</td><td>ao@ao.ca</td></tr>
        <tr><td class="tar rPad">Original E-Mail:</td><td>ao@selectcomtelecom.ca</td></tr>
        <tr><td class="tar rPad">Original Fax:</td><td>555-555-5555</td></tr>
    </table>

    <br/>

    <div width="98.7%" class="col-container">
        
    
    <table class="Cx col" >
        <th><strong>Activty</strong></th>
        <tr><td>x</td><td>New</td><td>TF</td></tr>
        <tr><td>Add</td><td>Disc</td></tr>
		<tr><td>Change</td></tr>
        <tr><td>Seasonal Disc</td></tr>        
        <tr><td>Reconnect Date</td></tr>
     </table>

&nbsp;
    
      
    <table class="Cx col" >
		<th><strong>Service Type</strong></th>
        <tr><td>Service</td></tr>
        <tr><td>Cross Border-MCI</td></tr>
        <tr><td>Cross Border-AT&amp;T</td></tr>
        <tr><td>Other</td></tr>
        <tr><td><strong>Mass Calling</strong></td></tr>
        <tr><td>Yes</td><td>x</td><td>No</td></tr>
    </table>
    
    &nbsp;

    <table>
        <tr><td>
        <table width="100%" class="Cx col">

        <tr><td><strong>Dates</strong></td></tr>
        <tr><td>Application Date:</td>
            <td><apex:outputText value="{0,date,yyyy-MM-dd}"><apex:param value="{!Client_Line__c.LASTMODIFIEDDATE}" /></apex:outputText></td>
		</tr>
        <tr><td>Due Date: ??</td><td>what is the merge field?</td></tr>  

        </table>
        &nbsp;
        <table width="100%" class="Cx col">
        <tr><td><strong>Reference of Calls</strong></td></tr>
        <tr><td>Yes</td><td>x</td><td>No</td></tr>
        <tr><td>Refer Calls To</td></tr>
        </table>
            </td>
        </tr>
    </table>
    </div>

And the CSS is

.Cx{
    border: 1px solid #534e43;
}
.tac{
    text-align: center;
}
.tar{
    text-align: right;
}
.tal{
    text-align: left;
}
.rPad{
    padding-right: 10px;
}
.col-container {
  display: table;
  width: 98.7%;
}
.col {
  display: table-cell;
  padding: 16px;
}

Any help would be appreciated! Been struggling with this for awhile now.

April 22, 2020
·
Answer
·
Like
0
·
Follow
1

David Zhu 🔥
You can use the code below.

BTW, I would suggest using Ligthing Design System CSS. (https://www.lightningdesignsystem.com/utilities/sizing/) instead of add inline style attributes.

<div width="98.7%" class = "col-container"> <table border='1'> <tr> <td> <table class="Cx col" > <th><strong>Activty</strong></th> <tr><td>x</td><td>New</td><td>TF</td></tr> <tr><td>Add</td><td>Disc</td></tr> <tr><td>Change</td></tr> <tr><td>Seasonal Disc</td></tr> <tr><td>Reconnect Date</td></tr> </table> </td> <td> <table class="Cx col" > <th><strong>Service Type</strong></th> <tr><td>Service</td></tr> <tr><td>Cross Border-MCI</td></tr> <tr><td>Cross Border-AT&T</td></tr> <tr><td>Other</td></tr> <tr><td><strong>Mass Calling</strong></td></tr> <tr><td>Yes</td><td>x</td><td>No</td></tr> </table> </td> <td> <table> <tr><td> <table width="100%" class="Cx col"> <tr><td><strong>Dates</strong></td></tr> <tr><td>Application Date:</td> <td><apex:outputText value="{0,date,yyyy-MM-dd}"><apex:param value="{!Client_Line__c.LASTMODIFIEDDATE}" /></apex:outputText></td> </tr> <tr><td>Due Date: ??</td><td>what is the merge field?</td></tr> </table>   <table width="100%" class="Cx col"> <tr><td><strong>Reference of Calls</strong></td></tr> <tr><td>Yes</td><td>x</td><td>No</td></tr> <tr><td>Refer Calls To</td></tr> </table> </td> </tr> </table> </td> </tr> </table> </div>

April 22, 2020
·
Like
0
·
Dislike
0

Heather_Hanson
Hi David,

Thanks for the help...and the tip on the Lightning Design System!!

I tried your code though and it didn't seem to work. I had tried doing doing the tables within a table too and couldn't get it to work, but below is what happens when I copy/paste the code you gave me.

Do you have any other suggestions? I took what you gave me and broke it down to just two tables within the main table and stripped all CSS and width and they still appear one on top of the other.

April 23, 2020
·
Like
0
·
Dislike
0

Heather_Hanson
OK, I'm getting it now....will post when I have it all done and working.

April 23, 2020
·
Like
0
·
Dislike
0

Heather_Hanson
OK here it is:

<div width="98.7%" class="col-container"> <div class="Cx col" style="width: 30%;"> <table width="100%" cellspacing="0" cellpadding="0" > <tr > <th colspan="3"><strong>Activity</strong></th> </tr> <tr><td><strong>x</strong></td> <td>New</td> <td>TF</td> </tr> <tr> <td> </td> <td>Add</td> <td>Disc</td> </tr> <tr> <td> </td> <td>Change</td> </tr> <tr> <td> </td> <td>Seasonal Disc</td> </tr> </table> <br/> <table width="100%" cellspacing="0" cellpadding="0" > <tr> <td> </td> <td>Reconnect Date</td> </tr> </table> </div>    <div class="Cx col" style="width: 25%;"> <table width="100%" cellspacing="0" cellpadding="0" > <tr> <th colspan="3"><strong>Service Type</strong></th> </tr> <tr> <td class="lpad">Service</td> </tr> <tr> <td class="lpad">Cross Border-MCI</td> </tr> <tr> <td class="lpad">Cross Border-AT&T</td> </tr> <tr> <td class="lpad">Other</td> </tr> </table> <br/> <table width="100%" cellspacing="0" cellpadding="0" > <tr> <th colspan="3"><strong>Mass Calling</strong></th> </tr> <tr> <td>Yes</td> <td class="tar">X</td> <td>No</td> </tr> </table> </div>    <div class="col" > <div class="Cx"> <table width="100%" cellspacing="0" cellpadding="0" > <tr> <th colspan="3"><strong>Dates</strong></th> </tr> <tr> <td class="tar">Application Date:</td> <td class="tal"><apex:outputText value="{0,date,yyyy-MM-dd}"><apex:param value="{!Client_Line__c.LASTMODIFIEDDATE}" /></apex:outputText></td> </tr> <tr> <td class="tar">Due Date: ??</td> <td class="tal">what is the merge field?</td> </tr> </table> </div> <br/> <div class="Cx"> <table width="100%" cellspacing="0" cellpadding="0" > <tr> <th colspan="3"><strong>Reference of Calls</strong></th> </tr> <tr> <td class="lpad">Yes</td> <td class="tar">X</td> <td class="tal">No</td> </tr> <tr> <td class="lpad">Refer Calls To</td> <br/> </tr> </table> </div> </div> </div>

*{ font-family: 'Open Sans', sans-serif; } html,body{ font-family: 'Open Sans', sans-serif; width:100%; font-size:9pt; } h1 { font-size: 14pt; text-align: center; } .TFnum { padding: 20px 125px 0px 125px; } .Cx{ border: 1px solid #534e43; } .tac{ text-align: center; } .tar{ text-align: right; } .tal{ text-align: left; } .rPad{ padding-right: 10px; } th{ text-align: center; padding-bottom: 10px; } td{ padding: 2px 5px 2px 5px; } .lpad{ padding-left:30px; } .col-container { display: table; width: 98.7%; } .col { display: table-cell; }

April 23, 2020
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Help with lining up tables and making them the same size

You need to sign in to do that.