อยากตัด Table แนวนอน ใช้คำสั่งอะไรค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากตัด Table แนวนอน ใช้คำสั่งอะไรค่ะ

อยากตัด Table แนวนอน ใช้คำสั่งอะไรค่ะ

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>โปรแกรมแสดงสูตรคูณ</title>

<style> 
input[type=text] {
    width: 20%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid red;
    border-radius: 4px;

}
</style>


<style>
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 2px 5px;
    cursor: pointer;
}

.button1 {width: 100px;}
.button2 {width: 100%;}
.button3 {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
</style>

<style>
li{display:inline;}
</style>

<style> 
table {
    border-collapse: collapse;
    margin-right: auto;

}

table, td, th {
    border: 1px solid black;
    height: 10px;
    vertical-align:bottom;
}
</style>

</head>

 <body>
  <table align="center">
   
   <tr>
    <td>
     <center>ป้อนตัวเลขแม่สูตรคูณแสดงผลลัพธ์</center>
     <form name="form1" method="post" action="">
      <center>
        <b>สูตรคูณแม่ที่ : </b>   <input type="text" name="num_start" size="5">
      <b>ถึง :</b><input type="text" name="num_end" size="5">
      <input class="button button1"type="submit" value="คำนวณ">
      </center>
     </form>
    </td>
   </tr>
  </table>
  <br>
	
	<?php

     $num_start = $_POST['num_start'];
     $num_end = $_POST['num_end'];

     if(($num_start != "") AND ($num_end != ""))

         for($i=$num_start;$i<=$num_end;$i++){

     echo "<center>";
     //echo "สูตรคูณ แม่ 1 ถึง 12 <p>"; 
      //for($i = 1;$i<=12;$i++){
       echo"<ul>";
       echo"<li>";
       echo "
        <table border='1' style='display:table-cell'>
         <tr>
          <th>แม่ $i</th>
         </tr>";  

        for($a=1;$a<=12;$a++){
         echo "
          <tr>
           <td>$i X $a = <font color='red'>".$i*$a." </font></td>
          </tr>";
        }
       echo "</table>";
        echo"<p>";
       //}
      echo "</center>";
       
      }
     
    ?>
	
	
</body>
</html>

Freeman Indy 11-06-2021 22:28:13

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

อะไรคือตัด table แนวนอน

>>> อัพเดท >>> 12-06-2021
------------------------------------------

>>> อัพเดท >>> 12-06-2021
------------------------------------------

ninenik 12-06-2021

ความคิดเห็นที่ 2

ใช่ค่ะ รูปแบบที่ 2 ตารางแนวนอน ใส่ Code ตรงไหน ค่ะ ให้แสดงผล แนวนอน เหมือนภาพ ที่ 2

Freeman Indy 12-06-2021 01:05

ความคิดเห็นที่ 3

ตัดแท็กอื่นๆ ในลูปออกให้หมด ยกเว้น <table> ให้แสดงตารางอย่างเดียว
แล้วใช้ <div> สองอันซ้อน ไว้นอกลูป รูปแบบจะออกมาประมาณ

<div>
<div>

<table>....</table>
<table>....</table>
<table>....</table>

</div>
</div>

แบบนี้ตารางจะชิดซ้ายไล่ไปขวา เรื่อยๆ จนเต็มความกว้าง ตามจำนวน
สามารถจัดใหอยู่ตรงกลางโดยกำหนด div แรก และ div ที่สองมี style ประมาณนี้

<div style="text-align: center;">
<div style="display: inline-block;">  

</div>
</div>

แต่ถ้าต้องการให้แสดงไปในแนวนอน และตัดบรรทัด ถ้าจำนวน table มากกว่าความกว้าง
ให้กำหนดแนวนี้แทน

<div style="display: flex;width: 50%;flex-wrap: wrap;">

<div><table>....</table></div>
<div><table>....</table></div>
<div><table>....</table></div>

</div>

สร้างเป็น css class และกำหนดปรับแต่งเพิ่มเติมตามต้องการ

<style>
.wrap-table{
    display: flex;
    width: 50%;
    flex-wrap: wrap;
}
.item-table{

}
</style>

<div class="wrap-table">

<div class="item-table"><table>....</table></div>
<div class="item-table"><table>....</table></div>
<div class="item-table"><table>....</table></div>

</div>

ninenik 12-06-2021

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน