CSS : Change Table Hover Background Color

Post by Goborijung at 2020-06-22 13:11:48 | ID: 632

.table-hover tbody tr:hover > td {
  background-color: #D1D119;
}

CSS : Color Picker

Post by Goborijung at 2020-06-17 15:51:59 | ID: 624

https://www.w3schools.com/colors/colors_picker.asp

css : convert number to String in ExcelExport

Post by Goborijung at 2020-05-07 10:25:13 | ID: 530

style="mso-number-format:'\@'"

CSS : Export Excel - Convert type to Plaintext in Excel cell

Post by Goborijung at 2020-04-20 10:13:52 | ID: 503

style="mso-number-format:'@'"

Ex.
<td style="mso-number-format:'@'"><?=$rs['SerialNumber']?></td>

css : nowarp

Post by Goborijung at 2020-04-24 10:14:45 | ID: 513

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_white-space

Ex.
<style>
p.a {
  white-space: nowrap;
}

p.b {
  white-space: normal;
}

p.c {
  white-space: pre;
}
</style>

css : td > ทำให้ข้อความในช่อง td ไม่ให้ขึ้นบรรทัดใหม่ ให้มันยาวๆต่อกันไปเลย (td { white-space: nowrap; })

Post by Goborijung at 2021-01-19 10:05:39 | ID: 979

<style>
	td { white-space: nowrap; }
</style>

CSS : Text Shadow

Post by Goborijung at 2021-04-09 16:46:29 | ID: 1122

https://www.w3schools.com/css/css3_shadows.asp 

CSS : ตัวหนังสือขีดฆ่า , ตัวหนังสือขีดกลาง , kill

Post by Goborijung at 2021-05-29 14:41:26 | ID: 1222

// CSS ตัวหนังสือขีดฆ่า

.del {
text-decoration: line-through;
}

CSS :: Fix Table Top

Post by Goborijung at 2020-02-22 10:53:28 | ID: 406

Example Code

<style>
table {
	/*max-width:980px;*/
	table-layout:fixed;
	margin:auto;
}
th, td {
	padding:5px 10px;
	border:1px solid #000;
}
thead, tfoot {
	background:#f9f9f9;
	display:table;
	width:100%;
	width:calc(100% - 18px);
}
tbody {
	height:300px;
	overflow:auto;
	overflow-x:hidden;
	display:block;
	width:100%;
}
tbody tr {
	display:table;
	width:100%;
	table-layout:fixed;
}

</style>

<table>
  <thead>
    <tr>
      <th scope="col" rowspan='2'>Header 1</th>
      <th scope="col" colspan='4'>Header 2</th>
    </tr>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
    <tr>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
      <td>Cell content</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>
</table>

การจัดหน้าเว็บให้อยู่กึ่งกลางเสมอ

Post by Goborijung at 2018-12-24 13:52:06 | ID: 37

body {
 margin:auto;
}