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

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

อยากตัด Table แนวนอน ใช้คำสั่งอะไรค่ะ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!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

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

 ความคิดเห็นที่ 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> สองอันซ้อน ไว้นอกลูป รูปแบบจะออกมาประมาณ

1
2
3
4
5
6
7
8
9
<div>
<div>
 
<table>....</table>
<table>....</table>
<table>....</table>
 
</div>
</div>


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

1
2
3
4
5
<div style="text-align: center;">
<div style="display: inline-block;"> 
 
</div>
</div>

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


1
2
3
4
5
6
7
<div style="display: flex;width: 50%;flex-wrap: wrap;">
 
<div><table>....</table></div>
<div><table>....</table></div>
<div><table>....</table></div>
 
</div>
 
สร้างเป็น css class และกำหนดปรับแต่งเพิ่มเติมตามต้องการ
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ