2011年10月5日 星期三

HTML表格table邊框1px


在程式碼中貼入以下語法,再其更改各人需求

<title>HTML讓table邊框變1px</title>
<style type="text/css">
<!--
.entry_t table{border-collapse:collapse;border-spacing:0;border-left:1px solid #d2d2d2;border-top:1px solid #d2d2d2;}
.entry_t th, .entry_t td{border-right:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;padding:5px 15px;}
.entry_t th{font-weight:bold;}
-->
</style>

</head>

****************************************  CSS貼在 </head> 之上

<body>
<div class="entry_t">
  <table width="550" cellpadding="4" class="w_6">
    <tr>
      <td width="87" bgcolor="#E6FFD9">設備尺寸</td>
      <td width="429" bgcolor="#E6FFD9">W:1100mm x L:1000mm x H:1700mm</td>
      </tr>

    <tr>
      <td>設備重量</td>
      <td>760kg</td>
    </tr>
    <tr>
      <td bgcolor="#E6FFD9">點膠控制器</td>
      <td bgcolor="#E6FFD9">可連結各式控制器(廠商指定) / 注膠時間控制精度±1ms內</td>
      </tr>
  </table>
</div>

</body>

****************************************   貼在 <body> <table> </body> 中間

以上這是為這個 <table> 單獨設邊框1px,不會動到其它 <table>
若要網頁裡所有邊框都為1px
就不用<div>另外去包

範例

CSS
<style type="text/css">
<!--
t table{border-collapse:collapse;border-spacing:0;border-left:1px solid #d2d2d2;border-top:1px solid #d2d2d2;}
t th, .t td{border-right:1px solid #d2d2d2;border-bottom:1px solid #d2d2d2;padding:5px 15px;}
t th{font-weight:bold;}
-->
</style>


HTML 
<table width="550" cellpadding="4" class="w_6">
    <tr>
      <td width="87" bgcolor="#E6FFD9">設備尺寸</td>
      <td width="429" bgcolor="#E6FFD9">W:1100mm x L:1000mm x H:1700mm</td>
      </tr>
    <tr>
      <td>設備重量</td>
      <td>760kg</td>
    </tr>
    <tr>
      <td bgcolor="#E6FFD9">點膠控制器</td>
      <td bgcolor="#E6FFD9">可連結各式控制器(廠商指定) / 注膠時間控制精度±1ms內</td>
      </tr>
  </table>


沒有留言:

張貼留言