2013-06-18 7 views
13

次の表のコードである:テーブルに水平線を追加するには?

<table cellpadding="0" cellspacing="" width="100%" border="0"> 
     <tbody> 
      <tr class="pack_list_divider"> 
      <td width="30%" rowspan="2"> 
      <img id="coursimg" src="test_listings_files/default_package_image.png" alt="Section wise test" border="0"> 
      </td> 
      <td width="25%"> 
      <p class="pckgvalidity"> 
      Validity : 1 Year&nbsp;      
      </p> 
      </td> 
      <td width="35%"> 
      <p class="pckgvalidity">Number of Tests : 0 
      </p> 
      </td> 
      <td width="20%" valign="middle"> 
      <!--<p id="test_list_loader" height="20" align="center" style="display:none;"></p> --> 
      <a href="http://localhost/abc/pqr/lmn/web/online-test-packages?op=get_package_detail&amp;test_pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a" class="view_test_package_details">Test Details</a> 
      </td> 
     </tr> 
     <tr> 

      <td colspan="2" width="50%" valign="top"> 
      <p class="descp"> 
      sectionm wise tests 
      </p>   
      </td>   
      <td width="20%"> 
           <p class="pckgrs"> <span class="rs fl" style="color:#333333; font:25px bold; margin:0px 0px 10px 10px;"> Free &nbsp; </span> 
      <span> 

       <a class="user-not-loggedin more addcart fl" href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&amp;pack_type=test&amp;op=aa" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;">&nbsp;</a>    

      </span> 

       </p></td> 
</tr> 
</tbody></table> 

当該スクリーンショットも取り付けられています。その中で私は水平線が必要な場所を指定しました。私は非常に多くのトリックを試みたが、誰も私のために魔法をしなかった。この問題を解決するのに誰も助けてくれますか?前もって感謝します。

+1

を、その行は、私はスクリーンショットを見ることができないのtr tdの – BeNdErR

+0

にそれを追加しよう..


のようです。 –

答えて

12

は今、あなたは、ヘッダー行のスタイルを設定することができます。表のヘッダーを使用して、そこ

<table> 
    <thead> 
     <tr> 
      <th>Valididty></th> 
      <th>No Of Tests</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Test</td> 
      <td>Test</td> 
     </tr> 
    </tbody> 
</table> 

に下線を追加します。各セルを作る下の境界線を持っている:

table { border-collapse:collapse; } 
table thead th { border-bottom: 1px solid #000; } 
+2

また、境界線を継続するためには、セルの間隔を削除する必要があります – BeNdErR

11

はここを見て:http://jsfiddle.net/ZmBmh/

HTML

<table> 
    <tr class="firstLine"> 
     <td>hey</td><td>hello</td><td>yuhuu</td> 
    </tr> 
    <tr> 
     <td>hey</td><td>hello</td><td>yuhuu</td> 
    </tr> 
    <tr> 
      <td colspan="3"><hr/></td> 
    </tr> 
    <tr> 
     <td>hey</td><td>hello</td><td>yuhuu</td> 
    </tr> 
</table> 

CSS

table{ 
    border-collapse: collapse; 
} 
.firstLine td{ 
    border-bottom: 2px solid black; 
} 
-2

このような何か:

http://jsfiddle.net/j3xB8/

<table border="1" cellpadding="0" cellspacing="" width="100%" > 
     <tbody> 
      <tr class="pack_list_divider"> 
       <tr> </tr> 
      <td width="25%"> 
      <p class="pckgvalidity"> 
      Validity : 1 Year&nbsp;      
      </p> 
      </td> 
      <td width="35%"> 
      <p class="pckgvalidity">Number of Tests : 0 
      </p> 
      </td> 
      <td width="20%" valign="middle"> 
      <!--<p id="test_list_loader" height="20" align="center" style="display:none;"></p> --> 
      <a href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/online-test-packages?op=get_package_detail&amp;test_pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a" class="view_test_package_details">Test Details</a> 
      </td> 
     </tr> 
     <tr> 

      <td colspan="2" width="50%" valign="top"> 
      <p class="descp"> 
      sectionm wise tests 
      </p>   
      </td>   
      <td width="20%"> 
           <p class="pckgrs"> <span class="rs fl" style="color:#333333; font:25px bold; margin:0px 0px 10px 10px;"> Free &nbsp; </span> 
      <span> 

       <a class="user-not-loggedin more addcart fl" href="http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&amp;pack_type=test&amp;op=aa" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;">&nbsp;</a>    

      </span> 

       </p></td> 
</tr> 
</tbody></table> 

それはあなたが探しているものであれば教えてください。私はこのトリックを使用

+0

テーブル全体に境界線を追加したばかりです。 – BeNdErR

8

:ここから

<table> 
    <tr style="border-bottom:1px solid black"><td colspan="100%"></td></tr> 
    <tr> ... </tr> 
</table> 
+2

これは驚くほどうまく動作します。 – Winona

関連する問題