Tag: css

ทำตารางสลับสีแนวตั้ง

February 29, 2012 /

จาก entry คราวที่แล้วเรื่องทำตารางสลับสีแบบง่ายๆ ก็เลยเกิดความสงสัยขึ้นมาว่า ถ้าจะทำตารางสลับสีแนวตั้งละ มันจะทำได้ไหม ถ้าคิดอะไรไม่ออกก็คงต้องใช้ php ลงสีเอาอีกแน่ๆ

แบบนี้แหละที่เราต้องการ ถ้าเขียนโค๊ดก็คงประมาณนี้

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>COL1</td>
    <td bgcolor="#CCCCCC">COL2</td>
    <td>COL3</td>
    <td bgcolor="#CCCCCC">COL4</td>
    <td>COL5</td>
  </tr>
  <tr>
    <td>01</td>
    <td bgcolor="#CCCCCC">11</td>
    <td>21</td>
    <td bgcolor="#CCCCCC">31</td>
    <td>41</td>
  </tr>
  <tr>
    <td>02</td>
    <td bgcolor="#CCCCCC">12</td>
    <td>22</td>
    <td bgcolor="#CCCCCC">32</td>
    <td>42</td>
  </tr>
  <tr>
    <td>03</td>
    <td bgcolor="#CCCCCC">13</td>
    <td>23</td>
    <td bgcolor="#CCCCCC">33</td>
    <td>43</td>
  </tr>
</table>

ซึ่งมันดู… ธรรมดามากๆ แถมยังแก้ไขยากอีก ถ้าต้องการเปลี่ยนสีจาก CCC เป็นสีอื่นละ แล้วถ้ามันมีสัก 500 เซล… งานงอกกันทีเดียว Continue reading

ตารางสลับสีแบบง้าย ง่าย

February 13, 2012 /

ปกติเวลาเราสร้างตาราง (table) สำหรับขึ้นมาสักอันหนึ่ง แล้วเราต้องการแยกสีสำหรับแต่ละแถว เราก็อาจจะเขียนโค๊ดในการวนลูปเพื่อให้แต่ละแถวมีสีไม่เหมือนกัน แต่ถ้าหากเราไม่สามารถให้สามารถวนลูปได้ คือ server รัน php หรือ asp ไม่ได้ เราจะมีวิธีแก้ปัญหายังไงดี

ง่ายๆ เลย ก็ใส่สีในแต่ละแถวไปเลยสิ (ง่ายไหม)

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col" width="33%">ช่องที่</th>
    <th scope="col" width="33%">ตัวหนังสือ</th>
    <th scope="col">ภาษาไทย</th>
  </tr>
  <tr bgcolor="#999">
    <td>1</td>
    <td>A</td>
    <td>ก</td>
  </tr>
  <tr>
    <td>2</td>
    <td>B</td>
    <td>ข</td>
  </tr>
  <tr bgcolor="#999">
    <td>3</td>
    <td>C</td>
    <td>ฃ</td>
  </tr>
  <tr>
    <td>4</td>
    <td>D</td>
    <td>ค</td>
  </tr>
  <tr bgcolor="#999">
    <td>5</td>
    <td>E</td>
    <td>ฅ</td>
  </tr>
  <tr>
    <td>6</td>
    <td>F</td>
    <td>ฆ</td>
  </tr>
  <tr bgcolor="#999">
    <td>7</td>
    <td>G</td>
    <td>ง</td>
  </tr>
  <tr>
    <td>8</td>
    <td>H</td>
    <td>จ</td>
  </tr>
  <tr bgcolor="#999">
    <td>9</td>
    <td>I</td>
    <td>ฉ</td>
  </tr>
</table>

ได้แบบนี้เลย
cmdevhub Continue reading

แก้ขนาด facebook comment

January 26, 2012 /

สำหรับคนที่ทำเว๊ปแบบ responsive แล้วใช้ facebook comment แล้ว ปัญหาใหญ่คือ เมื่อแสดงผลในมือถือหรือถ้า block ที่เราออกแบบไว้เปลี่ยนขนาด คงจะมีปัญหาเรื่อง block ของ facebook comment ไม่ปรับขนาดตาม วิธีแก้ปัญหาง่ายๆ เลย เราก็แค่เพิ่ม css นี้เข้าไป แค่นี้ก็ใช้งานได้แล้ว

.fb-comments, .fb-comments iframe[style] {
   width: 100% !important;
}

แค่นี้ขนาดของ facebook comment ก็เปลี่ยนไปตามขนาดหน้าจอแล้ว สบายๆ เลย 🙂