โดบผลลัพธ์ที่อยากได้ จะ เป็น ลักษณะนี้ คือส่วนของ grid จะเป็นเหมือน bg ไม่เกี่ยวข้องกับ ส่วนของเนื้อหาที่เราใส่ไป
- โดยที่ทำตอนนี้ คือ ถ้าเราใส่เนื้อหานอก gird ข้อมูลก็จะอยู่ใต้ gird
ผลลัพธ์ที่ได้
โค้ด: เลือกทั้งหมด
<HTML> <HEAD> <TITLE> mdsoft_html_billing_note_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> <style> body { margin-left: auto; margin-right: auto; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: auto; border-radius: 5px; } font{ font-size: 10px; font-family:THNiramitAS; } .footer { position: fixed; bottom: 0px; left: 0px; padding: 10px; text-align: center; width: 100%; } table { border: 2px solid rgb(0, 0, 0); } .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto; background-color: #000000; padding: 2px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } </style> </HEAD> <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> <BODY> ทดสอบบ้อมูล </BODY> </HTML>
- หรือลองทำแบบบนี้ ใส่ข้อมูล ในช่อง grid ก็จะช่องไม่เท่ากัน ไม่ใช่แบบที่ต้องการ
ผลจะเป็นแบบนี้ค่ะ
โค้ด: เลือกทั้งหมด
<HTML> <HEAD> <TITLE> mdsoft_html_billing_note_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> <style> body { margin-left: auto; margin-right: auto; } .page { width: 21cm; min-height: 29.7cm; padding: 2cm; margin: auto; border-radius: 5px; } font{ font-size: 10px; font-family:THNiramitAS; } .footer { position: fixed; bottom: 0px; left: 0px; padding: 10px; text-align: center; width: 100%; } table { border: 2px solid rgb(0, 0, 0); } .grid-container { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto auto; background-color: #000000; padding: 2px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); padding: 20px; font-size: 30px; text-align: center; } </style> </HEAD> <div class="grid-container"> <div class="grid-item">ทดสอบข้อมูล</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> <div class="grid-item">7</div> <div class="grid-item">8</div> <div class="grid-item">9</div> </div> <BODY> </BODY> </HTML>