- ตัวอย่างที่ 1 กำหนดให้ คอลัมน์ที่ 1 กว้าง 50% และ คอลัมน์ที่ 2, 3 มีความกว้างคอลัมน์ละ 25%
ผลลัพธ์ที่ได้
โค้ด: เลือกทั้งหมด
<HTML> <HEAD> <TITLE> mdsoft_html_trial_balance_print </TITLE> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </HEAD> <body> <center> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%"> <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 1</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 2</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 3</div> </div> </center> </body> </HTML>
- ตัวอย่างที่ 2 กำหนดให้ คอลัมน์ที่ 6 กว้าง 50% และ คอลัมน์ที่ 4, 5 มีความกว้างคอลัมน์ละ 25%
ผลลัพธ์ที่ได้
โค้ด: เลือกทั้งหมด
<HTML> <HEAD> <TITLE> mdsoft_html_trial_balance_print </TITLE> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </HEAD> <body> <center> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%"> <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 1</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 2</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 3</div> </div> <br> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%"> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 4</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 5</div> <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 6</div> </div> </center> </body> </HTML>
- ตัวอย่างที่ 3 กำหนดให้ คอลัมน์ที่ 8 กว้าง 50% และ คอลัมน์ที่ 7, 9 มีความกว้างคอลัมน์ละ 25%
ผลลัพธ์ที่ได้
โค้ด: เลือกทั้งหมด
<HTML> <HEAD> <TITLE> mdsoft_html_trial_balance_print </TITLE> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </HEAD> <body> <center> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%"> <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 1</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 2</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 3</div> </div> <br> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%"> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 4</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 5</div> <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 6</div> </div> <br> <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 100%"> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 7</div> <div style="border: solid 1px rgb(0, 0, 0); width: 50%">ช่องที่ 8</div> <div style="border: solid 1px rgb(0, 0, 0); width: 25%">ช่องที่ 9</div> </div> </center> </body> </HTML>