Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > CSS ติดปัญหา margin-top ตรง <detail> ไม่เรื่อยลงมา และอยากจะคลุมความสูงของ detail ไม่ได้เกิน footer ด้วยค่ะ (มีรูปภาพและโค๊ดตัวอย่าง)

CSS ติดปัญหา margin-top ตรง <detail> ไม่เรื่อยลงมา และอยากจะคลุมความสูงของ detail ไม่ได้เกิน footer ด้วยค่ะ (มีรูปภาพและโค๊ดตัวอย่าง)

เริ่มหัวข้อใหม่

NUT

โพสกระทู้ ( 56 )
บทความ ( 0 )

CSS ติดปัญหา margin-top ตรง <detail> ไม่เรื่อยลงมา และอยากจะคลุมความสูงของ <detail> ไม่ได้เกิน footer ด้วยค่ะ (มีรูปภาพและโค๊ดตัวอย่าง)

เทส Loop for ตัวเลข 0 1 30 31 32 33 จะไม่แสดง

ทดสอบกด Printer จาก Google Chrome จะเห็นตามรูปภาพตัวอย่าง

sdfferfweg gsdfg

Code (PHP)

<style type="text/css">
body {
  background: rgb(204,204,204); 
}
page {
  position: relative;
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
}

page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
header,
footer {
  position: absolute;
  left: 0;
  right: 0;
  background-color: #ccc;
  padding-right: 1.5cm;
  padding-left: 1.5cm;
}
header:after{
  content: "Header";
}
footer:after{
  content: "Footer";
}

header {
  top: 0;
  padding-top: 5mm;
  padding-bottom: 3mm;
}
detail {
  margin-top: 100px;
}
footer {
  bottom: 0;
  color: #000;
  padding-top: 3mm;
  padding-bottom: 5mm;
}

@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
  header,
  footer {
    position: fixed;
    left: 0;
    right: 0;
    background-color: #ccc;
    padding-right: 1.5cm;
    padding-left: 1.5cm;
  }
}
</style>

<page size="A4">
  <header>
    header
  </header>
  
<detail>
<table style="width:100%">
<?php
for ($x = 0; $x <= 45; $x++) {
?>
  <tr>
    <th><?php echo $x;?></th>
    <th>AA</th>
    <th>BB</th>
	<th>CC</th>
	<th>DD</th>
	<th>EE</th>
	<th>FF</th>
	<th>GG</th>
  </tr>
<?php } ?>
</table>
</detail>

  <footer>
    footer
  </footer>
</page>

Tag : PHP, CSS, HTML5, Google Chrome, Mozilla Firefox

ประวัติการแก้ไข
2020-01-28 10:58:32
2020-01-28 10:59:01
2020-01-28 11:00:35

Date : 2020-01-28 10:57:27

By : kittipongw

View : 873

Reply : 4

No. 1

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

เขียนไรแยกแยะครับคุณกิติพงษ์ ใส่แค่นี้พอ
Code (PHP)

<style type="text/css">
table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
} 
</style>

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
        <?php for($i=0;$i<50;$i++){?>
      <tr>
        <td><?=$i?></td>
       </tr>
        <?php } ?>
    </tbody>
    <tfoot class="report-footer">
      <tr>
         <td>Footer</td>
      </tr>
    </tfoot>
</table>

ประวัติการแก้ไข
2020-01-28 11:35:55

Date : 2020-01-28 11:25:08

By : Genesis™

No. 2

NUT

โพสกระทู้ ( 56 )
บทความ ( 0 )

ขอบคุณนะค่ะ คุณ Genesis

แต่ปัญหา footer มันไม่อยู่ด้านล่างแบบ template ดันไปต่อท้าย detail

gdfgdfgdg

Date : 2020-01-28 11:47:37

By : kittipongw

No. 3

Genesis™

โพสกระทู้ ( 4,169 )
บทความ ( 7 )

เบื้องต้นคุณตั้งคำถามเกี่ยวกับ table หนิ งั้นเดี๋วรอท่านอื่นมาตอบครับ

Date : 2020-01-28 12:21:25

By : Genesis™

No. 4

To Be Developer

โพสกระทู้ ( 1,994 )
บทความ ( 10 )

ลองเพิ่มส่วน @media print ให้มีส่วนเว้นช่องว่าง บน ล่าง ดูครับ

Code

@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
  header,
  footer {
    position: fixed;
    left: 0;
    right: 0;
    background-color: #ccc;
    padding-right: 1.5cm;
    padding-left: 1.5cm;
  }

header {
  padding-top: 5mm;
  padding-bottom: 3mm;
}
footer {
  padding-top: 3mm;
  padding-bottom: 5mm;
}

}

Date : 2020-01-28 16:14:22

By : {Cyberman}

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : CSS ติดปัญหา margin-top ตรง <detail> ไม่เรื่อยลงมา และอยากจะคลุมความสูงของ detail ไม่ได้เกิน footer ด้วยค่ะ (มีรูปภาพและโค๊ดตัวอย่าง)

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 00