I want to make status board with visualforce.
When I test HTML page, it works.
But, It doesn't work with same code on visualforce page.
I don't know why height of style does not apply to table and vertical-align of style does not apply to image in div.
picture 1: HTML page
picture 2: Visualforce page
The code is following:
<apex:page showHeader="false"
standardStylesheets="false" sidebar="false" applyHtmlTag="false"
applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>수술/시술 상황판</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet
<apex:slds />
TODO : api version error / find how to solve the problem -->
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
table {
border-collapse: collapse;
margin: 2.5px;
padding: 2.5px;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<div
style="float: left; background-color: aqua; width: 60%; height: 100%"
align="center">
<table style="width: 99%; height: 99%;">
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="" />
</colgroup>
<tr style="height: 5%;">
<th>501호</th>
<th>502호</th>
<th>503호</th>
<th>504호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th>101호</th>
<th>102호</th>
<th>103호</th>
<th>104호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th >수술실 1</th>
<th >수술실 2</th>
<th >수술실 3</th>
<th >레이저실(107호)</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div
style="float: left; background-color: green; width: 40%; height: 38.5%; vertical-align: middle;">
<div align="center">
<img alt="Mods Clinic Logo"
src="http://www.modsclinic.co.kr/assets/front/images/main/logo.png"
style="width: 90%;" /><br />
<h1 style="color: white; margin: 0; padding: 0; margin-bottom: 5px">상
황 판</h1>
</div>
</div>
<div
style="float: left; background-color: orange; width: 30%; height: 61.5%">
<table style="width: 99%; height: 99%;">
<colgroup>
<col width="33%"/>
<col width="33%"/>
<col width=""/>
</colgroup>
<tr style="height: 7.5%;">
<th>메디짐 운동실</th>
<th>메디짐 치료실</th>
<th>회복실1(105호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실1</th>
<th>상담실2</th>
<th>회복실2(107호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실3</th>
<th>상담실4</th>
<th>미팅룸</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div
style="float: left; background-color: yellow;; width: 10%; height: 30.75%">
<table style="width: 99%; height: 99%;">
<tr style="height: 15%;">
<th>대기자</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
<div
style="float: left; background-color: silver; width: 10%; height: 30.75%">
<table style="width: 99%; height: 99%;">
<tr style="height: 15%;">
<th >시술마침</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
</body>
</html>
</apex:page>
Please Help Me.
Related
In my pdf visualforce, I have a table which iterates over a list of records:
<apex:component controller="SaleInvoiceController" access="global">
<apex:attribute name="saleInvoicePI" assignTo="{!saleInvoiceId}" description="Sale Invoice para la Sale Invoice" type="String"/>
<apex:stylesheet value="{!URLFOR($Resource.PDF_Resources, 'css/saleInvoice.css')}"/>
<div class="header">
<p style="text-align: center;">
<b>
{!parametros.Name}<BR/>
Registered Office: {!parametros.Billing_Street__c}, {!parametros.Billing_City__c}, {!parametros.Billing_Zip_Postal_Code__c}<BR/>
Correspondence Address: {!parametros.Shipping_Street__c}, {!parametros.Shipping_City__c}, {!parametros.Shipping_Zip_Postal_Code__c}<BR/>
Telephone: {!parametros.Phone__c} FAX: {!parametros.Fax__c}<BR/>
<apex:outputText value="{!parametros.Vat__c}" rendered="{!isFoskett}" />
</b>
</p>
<p style="text-align: center;{! IF(isFoskett, 'display:none;' , '') }">
VAT: {!cuenta.CUIT__c}<BR/>
</p>
</div>
<div class="divPage" style="width: 100%;">
<table style="width: 80%;" cellpadding="0" cellspacing="0">
<tr style="height: 100px;">
<td class="tdBorder" style="width: 50%;">
<div><b>{!mainCustomer.Name}</b></div>
<div>{!mainCustomer.BillingStreet}</div>
<div>{!mainCustomer.BillingCity}</div>
<div>{!mainCustomer.BillingCountry}</div>
<div>{!mainCustomer.BillingPostalCode}</div>
</td>
<td class="tdBorder" style="width: 50%;">
<div><b>Date:</b> <apex:outputText value="{0, date, dd/MM/yyyy}"><apex:param value="{!saleInvoice.Date__c}" /></apex:outputText></div>
<div><b>Invoice No:</b> {!saleInvoice.Invoice_Nbr__c}</div>
</td>
</tr>
<tr style="height: 100px;">
<td class="tdBorder">
<div><b>PO #</b> {!soldContainer.PO__c}</div>
</td>
<td class="tdBorder">
<div><b>Transport:</b> {!saleInvoice.Vessell_name__c}</div>
<div><b>Country of Origin:</b> {!saleInvoice.origen_country_name__c}</div>
<div><b>Country of Destination:</b> {!saleInvoice.Destination_Country_name__c}</div>
</td>
</tr>
</table>
<BR/>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Cartons</th>
<th>Description</th>
<th>Gross</th>
<th>Net</th>
<th>Price <span style="display:{!IF(saleInvoice.Euros__c, 'none', 'inline')};">US$</span><span style="display:{!IF(!saleInvoice.Euros__c, 'none', 'inline')};">€</span></th>
<th>Total <span style="display:{!IF(saleInvoice.Euros__c, 'none', 'inline')};">US$</span><span style="display:{!IF(!saleInvoice.Euros__c, 'none', 'inline')};">€</span></th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5"></th>
<th>Total</th>
</tr>
<tr>
<th class="tdNumber"><apex:outputField value="{!saleInvoice.Total_Packs_1__c}" /></th>
<th></th>
<th class="tdNumber"><apex:outputField value="{!saleInvoice.Kgs_Total_Gross_Weight_1__c}" /></th>
<th class="tdNumber"><apex:outputField value="{!saleInvoice.Kgs_Total_Net_Weight_1__c}" /></th>
<th></th>
<th class="tdNumber">
<apex:outputField value="{!saleInvoice.Total_US__c}" rendered="{!!saleInvoice.Euros__c}" />
<apex:outputField value="{!saleInvoice.Total_Euros__c}" rendered="{!saleInvoice.Euros__c}" />
</th>
</tr>
</tfoot>
<tbody>
<apex:repeat value="{!saleItems}" var="saleItem">
<tr>
<td class="tdNumber"><apex:outputField value="{!saleItem.Packs__c}" /> </td>
<td>
<apex:outputText value="{!saleItem.Description_Another_Components__c}" rendered="{!saleItem.Another_component__c}"/>
<apex:outputText value="{!saleItem.Customaize_Description__c} " rendered="{!!saleItem.Another_component__c}"/>
</td>
<td class="tdNumber"><apex:outputField value="{!saleItem.Kgs_Gross_Weight__c}" rendered="{!!saleItem.Another_component__c}"/> </td>
<td class="tdNumber"><apex:outputField value="{!saleItem.Kgs_Net_Weight__c}" rendered="{!!saleItem.Another_component__c}"/> </td>
<td class="tdNumber">
<apex:outputField value="{!saleItem.USD_Per_Net_Ton__c}" rendered="{!!saleInvoice.Euros__c && !saleItem.Another_component__c}"/>
<apex:outputField value="{!saleItem.Per_Net_Ton__c}" rendered="{!saleInvoice.Euros__c && !saleItem.Another_component__c}"/>
</td>
<td class="tdNumber">
<apex:outputField value="{!saleItem.Total_Item_Amount__c}" rendered="{!!saleInvoice.Euros__c}"/>
<apex:outputField value="{!saleItem.Total_Item_Amount_Euros__c}" rendered="{!saleInvoice.Euros__c}"/>
</td>
</tr>
</apex:repeat>
<tr style="height: 20px;">
<td></td>
<td>{!saleInvoice.First_Payment_Percentage__c}% {!saleInvoice.First_Payment_Conditions__c} </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 20px;display:{!IF(saleInvoice.Second_Payment_Percentage__c>0, 'display', 'none')};">
<td></td>
<td>{!saleInvoice.Second_Payment_Percentage__c}% {!saleInvoice.Second_Payment_Conditions__c} </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 40px;">
<td></td>
<td>
{!saleInvoice.Price_Condition__c} <apex:outputField value="{!saleInvoice.Destination_Port_name__c}"/> <BR/>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 40px;">
<td></td>
<td>
<div style="font-weight: bold;">
Container:
</div>
{!saleInvoice.Purchased_CT_Number__c} <BR/>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 40px;">
<td></td>
<td>
Please arrange payment to our bankers:
<div style="font-weight: bold;">
<BR/>
{!saleInvoice.Bank_Information__r.Name} <BR/>
{!saleInvoice.Bank_Information__r.Beneficiary_Bank_ABA__c} <BR/>
{!saleInvoice.Bank_Information__r.Beneficiary_Bank_Address__c} <BR/>
ACCOUNT NO: {!saleInvoice.Bank_Information__r.Beneficiary_Bank_Account_Nbr__c} <BR/>
{!saleInvoice.Bank_Information__r.Beneficiary_Customer__c} <BR/>
SWIFT: {!saleInvoice.Bank_Information__r.Beneficiary_Bank_Swift_Code__c} <BR/>
IBAN: {!saleInvoice.Bank_Information__r.Beneficiary_Bank_IBAN__c} <BR/>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 90%"> </td>
<td style="text-align: center;"><apex:image url="{!digitalSignImage}" width="200px" height="100px"/><br/>{!digitalSignText}</td>
</tr>
</table>
</div>
</apex:component>
CSS:
#page {
margin-top: 3cm;
margin-left: 1.0cm;
margin-right: 1.0cm;
margin-bottom: 0.5cm;
#top-center{
content: element(header);
}
}
* {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
table {
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
table thead tr th {
border: 1px solid black;
text-align: center;
padding: 5px;
}
table tfoot tr th {
border: 1px solid black;
padding: 5px;
}
table tbody tr td {
border-left: 1px solid black;
border-right: 1px solid black;
padding: 5px;
}
div.header {
position: running(header);
}
.tdBorder {
border: 1px solid black;
padding: 5px;
}
.tdNumber {
text-align: right;
}
I want to only render 10 records per page.
I tried using a apex:variable, adding an output panel that renders a div with "page-break-after:always" every 10 iterations, but it affects the width of the table for some reason and the footer is rendered on the first page, and not at the bottom of the table.
Do I have to make logic on the apex side ? or is there a css or some css attributes that can help me achieve this without apex logic? Thanks!
I have the following code:
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
which produces the following table:
How can I merge my "x" and "y" cells so that the row they're in consists of only one cell "xy"?
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
</tbody>
</table>
Colspan is what you seek. Also dunno if someone told you but inline css is bad practice you should use class instead
Here you have the code with class instead of inline css : (same result but prettier)
.bigRow {
height: 126px;
}
.bigRow-2 {
height: 108px;
}
.bigRow td, .bigRow-2 td {
height: 100%;
width: 50%;
}
.smallRow {
height: 18px;
}
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr class="bigRow">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
<tr class="bigRow-2">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
Hello I need a fluid table with other div in the same line. Here you can see a fiddle where I could do what I want, which works perfectly on Chrome. The problem is when I try it on Firefox. The column width is the minimum, it is not expanding as in Chrome.
<div class="container" style="background-color: lightgray; overflow: auto;">
<div style="height: 200px; overflow-y: auto; margin-right: 300px; float: left;">
<table border="1" style="">
<theader>
<tr>
<th>ID</th>
<th style="width:100%">Name</th>
<th>Time</th>
</tr>
</theader>
<tbody>
<tr>
<td>1</td>
<td style="word-break: break-all">Dan</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>2</td>
<td style="word-break: break-all">Bob</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>3</td>
<td style="word-break: break-all">Jenn</td>
<td>00:00:00.000</td>
</tr>
</tbody>
</table>
</div>
<div style="background-color: #65de4f80; width: 300px; height: 200px; margin-left: -300px; float: left;"></div>
</div>
REmove float : left and also the overflow: auto on top you don 't need
<div class="container" style="background-color: lightgray;">
<div style="height: 200px; overflow-y: auto; margin-right: 300px;">
<table border="1" style="">
<theader>
<tr>
<th>ID</th>
<th style="width:100%">Name</th>
<th>Time</th>
</tr>
</theader>
<tbody>
<tr>
<td>1</td>
<td style="word-break: break-all">Dan</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>2</td>
<td style="word-break: break-all">Bob</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>3</td>
<td style="word-break: break-all">Jenn</td>
<td>00:00:00.000</td>
</tr>
</tbody>
</table>
</div>
<div style="background-color: #65de4f80; width: 300px; height: 200px; margin-left: -300px; float: left;"></div>
</div>
Regards
I found the Column Nesting of Grid so that I can make a view following:
(Resource: https://www.lightningdesignsystem.com/utilities/grid/#Column-Nesting)
enter image description here
But I have a problem.
When I set the unit of height as "px", I can apply height on div. And columns and rows of table are applied with unit of height as "percentage"
On the other hands, when I set the unit of height as "percentage", I can't apply height with unit of height as "percentage" on div, columns, rows, and table!
I want to create a screen-based responsive visualforce page.
How can I apply height in "percentage"?
My code is following:
<apex:page showHeader="false" standardStylesheets="false"
sidebar="false" applyHtmlTag="false" applyBodyTag="false"
docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Condition of Operating Room of Mods Clinic</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet -->
<apex:slds />
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.operating {
height: 750px;
background-color: blue;
}
.logoAndExplaination {
height: 150px;
background-color: green;
}
.nonOperating {
height: 600px;
background-color: orange;
}
.waiting{
margin-top: 0;
margin-bottom: 0;
height: 300px;
background-color: fuchsia;
}
.end {
margin-top: 0;
height: 300px;
background-color: silver;
}
table {
border-collapse: collapse;
margin: 2.5px;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<!-- PRIMARY CONTENT WRAPPER -->
<div class="slds-grid slds-wrap">
<div class="operating slds-col slds-size_2-of-3">
<table style="width: 99%; height: 99%;">
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="" />
</colgroup>
<tr style="height: 5%;">
<th>501호</th>
<th>502호</th>
<th>503호</th>
<th>504호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th>101호</th>
<th>102호</th>
<th>103호</th>
<th>104호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th>수술실 1</th>
<th>수술실 2</th>
<th>수술실 3</th>
<th>레이저실(107호)</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="slds-col slds-size_1-of-3">
<div class="slds-grid slds-wrap">
<div class="logoAndExplaination slds-col slds-size_1-of-1" align="center">
<img alt="Image"
src=""
style="width: 90%;" />
<h1 style="color: white; margin: 0; padding: 0; margin-bottom: 5px">상 황 판</h1>
</div>
<div class="nonOperating slds-col slds-size_3-of-4">
<table style="width: 99%; height: 98%;">
<colgroup>
<col width="33%" />
<col width="33%" />
<col width="" />
</colgroup>
<tr style="height: 7.5%;">
<th>메디짐 운동실</th>
<th>메디짐 치료실</th>
<th>회복실1(105호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실1</th>
<th>상담실2</th>
<th>회복실2(107호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실3</th>
<th>상담실4</th>
<th>미팅룸</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="slds-col slds-size_1-of-4">
<div class="waiting slds-col slds-size_1-of-1">
<table style="width: 98%; height: 99%;">
<tr style="height: 15%;">
<th>대기자</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
<div class="end slds-col slds-size_1-of-1">
<table style="width: 98%; height: 96%;">
<tr style="height: 15%;">
<th>시술마침</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>
/************** ipad rotate ***************/
#media (max-width: 1080px) {}
/************** ipad ***************/
#media only screen and (min-width:768px) and (max-width: 1024px) and (orientation : portrait){}
/************** iphone rotate***************/
#media (max-width: 767px) {}
/************** iphone ***************/
#media (max-width: 479px) {}
You have to style based on device width by using above condition, if you still have doubt on styling let me know....Thank you
When you create a table with
table-layout: fixed;
and it consumes 100% width. Then you try to create 4 columns (10%, 10%, 40%, 40%)
However, some rows are only 2 columns long so we use colspan="2", this however breaks the predefined width value and distributes everything evenly.
My current solution is to have nested tables in td tags.
Is there a better way to do this or stop the colspan from breaking my width?
A simple 2 column example that breaks is below:
EDIT: CODE Updated the code for a better example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table style="width: 100%">
<caption>Table of Contents</caption>
<tbody>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>3</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
UPDATED WITH SOLUTION
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="3">
<div>Table of Contents</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td>
<div>3</div>
</td>
<td>
<div>-</div>
</td>
<td>
<div>Chapter Name</div>
</td>
</tr>
</table>
</body>
</html>
CSS
table {
table-layout: fixed;
}
.short {
width: 5%;
}
.long {
width: 90%;
}
table {
table-layout: fixed;
}
.short {
width: 5%;
}
.long {
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="3">
<div>Table of Contents</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;" colspan="2">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div></div>
</td>
<td style="width: 5%;">
<div>a)</div>
</td>
<td style="width: 90%;">
<div>Section Name</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div>2</div>
</td>
<td style="width: 5%;">
<div>-</div>
</td>
<td style="width: 90%;">
<div>Chapter Name</div>
</td>
</tr>
<tr>
<td>
<div>3</div>
</td>
<td>
<div>-</div>
</td>
<td>
<div>Chapter Name</div>
</td>
</tr>
</table>
</body>
</html>
You can use colgroup (original answer here)
html * {
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
table-layout: fixed;
width: 100%;
}
th,
td {
padding: 15px;
word-break: break-all;
border: 1px solid black;
}
.short {
width: 5%;
}
.long {
width: 95%;
}
<table style="width: 100%">
<colgroup>
<col class="short" />
<col class="long" />
</colgroup>
<tr>
<td colspan="2">
<div style="font-size: 300%;">Table of Contents</div>
</td>
</tr>
<tr>
<td>
<div>1</div>
</td>
<td>
<div>2</div>
</td>
</tr>
</table>
Is there any reason you can't simply specify table { width: 100%; } instead of using table-layout: fixed; ?
html *
{
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
width:100%;
}
th, td {
padding: 15px;
word-break: break-all;
background:#ccc;
}
https://jsfiddle.net/L05v6s8z/
Have you considered using a caption tag?
The caption element is semantically defined as the title for a table (which is what you are trying to do) and has been available since at least HTML 3.2. It is compatible with all browser versions, including IE6. You can style it with CSS to achieve the look & feel you're after.
html *
{
font-size: 98%;
color: #000;
font-family: Arial !important;
}
table {
table-layout: fixed;
}
table caption {
font-size: 300%;
}
th, td {
padding: 15px;
word-break: break-all;
}
<table style="width: 100%">
<caption>Table of Contents</caption>
<tbody>
<tr>
<td style="width: 5%;">
<div>1</div>
</td>
<td style="width: 95%;">
<div>Name</div>
</td>
</tr>
</tbody>
</table>