|
 |
|
ดูโค้ดให้หน่อยได้ไหมค่ะ. ..กำหนดขนาดตารางไม่ได้อะค่ะ. .ใช้ css |
|
 |
|
|
 |
 |
|
Code (PHP)
<html>
<head>
<!-- Bring to you by http://www.CSSTableGenerator.com -->
<link rel="stylesheet" href="table.css" type="text/css"/>
</head>
<body>
<div class="CSSTableGenerator" >
<table border="1" cellpadding="0" cellspacing="0" >
<tr>
<td>
Title 1
</td>
<td >
Title 2
</td>
<td>
Title 3
</td>
</tr>
<tr>
<td >
Row 1
</td>
<td>
Row 1
</td>
<td>
Row 1
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 2
</td>
<td>
Row 2
</td>
<td>
Row 2
</td>
</tr>
<tr>
<td >
Row 3
</td>
<td>
Row 3
</td>
<td>
Row 3
</td>
</tr>
</table>
</div>
</body>
</html>
Code (PHP)
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #898282;
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
}.CSSTableGenerator table{
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:9px;
-webkit-border-bottom-right-radius:9px;
border-bottom-right-radius:9px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:9px;
-webkit-border-top-left-radius:9px;
border-top-left-radius:9px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:9px;
-webkit-border-top-right-radius:9px;
border-top-right-radius:9px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:9px;
-webkit-border-bottom-left-radius:9px;
border-bottom-left-radius:9px;
}.CSSTableGenerator tr:hover td{
background-color:#e5e5e5;
}
.CSSTableGenerator td{
vertical-align:middle;
background-color:#cccccc;
border:1px solid #898282;
border-width:0px 1px 1px 0px;
text-align:left;
padding:0px;
font-size:12px;
font-family:Arial;
font-weight:normal;
color:#fcf9f9;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #4c4c4c 5%, #4c4c4c 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #4c4c4c) );
background:-moz-linear-gradient( center top, #4c4c4c 5%, #4c4c4c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#4c4c4c"); background: -o-linear-gradient(top,#4c4c4c,4c4c4c);
background-color:#4c4c4c;
border:0px solid #898282;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:16px;
font-family:Arial;
font-weight:bold;
color:#050404;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #4c4c4c 5%, #4c4c4c 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c4c4c), color-stop(1, #4c4c4c) );
background:-moz-linear-gradient( center top, #4c4c4c 5%, #4c4c4c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c4c4c", endColorstr="#4c4c4c"); background: -o-linear-gradient(top,#4c4c4c,4c4c4c);
background-color:#4c4c4c;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
Tag : PHP, MySQL, HTML/CSS, JavaScript, jQuery, CakePHP

|
|
 |
 |
 |
 |
Date :
2013-01-09 00:47:51 |
By :
เมจิก |
View :
1424 |
Reply :
5 |
|
 |
 |
 |
 |
|
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ลองเปลี่ยนพวกนี้ดูนะครบั width:100%; จาก % เป็น px เช่น width:600px;
|
 |
 |
 |
 |
Date :
2013-01-09 02:24:42 |
By :
JindaCpe8 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ขอบคุณมากนะค่ะ. .ทุกคำแนะนำ
|
 |
 |
 |
 |
Date :
2013-01-09 16:35:35 |
By :
เมจิก |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
แถม CSSTableGenerator ใช้ง่ายเลือกได้ตามใจชอบ
|
 |
 |
 |
 |
Date :
2013-01-09 21:08:00 |
By :
Krungsri |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
พอดีว่าก็เอาจากตรงนี้มานะค่ะในเว็บตั้งค่าพอดีแล้วแต่พอเอามาลงที่คอมแล้วรันตารางมันใหญ่ค่ะ. ..แก้ไขก้อไม่ได้ค่ะ
|
 |
 |
 |
 |
Date :
2013-01-09 22:26:44 |
By :
เมจิก |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 00
|