Как добавить горизонтальную линию в таблицу?

Ниже приведен код таблицы:

<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="#" onclick="location.href='http://localhost/abc/pqr/lmn/web/online-test-packages?op=get_package_detail&amp;test_pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a'; return false;" 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="#" onclick="location.href='http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&amp;pack_type=test&amp;op=aa'; return false;" 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

Используйте заголовок таблицы и добавьте подчеркивание там

<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

смотрите здесь: 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;
}

Ответ 3

Я использую этот трюк:

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

Ответ 4

Что-то вроде этого:

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="#" onclick="location.href='http://localhost/entrance_prime/Entrance_Prime/entprm/web/online-test-packages?op=get_package_detail&amp;test_pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a'; return false;" 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="#" onclick="location.href='http://localhost/entrance_prime/Entrance_Prime/entprm/web/my_cart.php?pack_id=21e86b3ebf6a8af2a9fcf136c4f8e88a&amp;pack_type=test&amp;op=aa'; return false;" id="21e86b3ebf6a8af2a9fcf136c4f8e88a" value="21e86b3ebf6a8af2a9fcf136c4f8e88a" style="background:url(../images_new/add_account.png) 0 0 no-repeat;">&nbsp;</a>             

             </span>

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

Скажите, если это то, что вы ищете.