如何在表格中添加水平线？

Question

如何在表格中添加水平线？

35

以下是表格的代码：

<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>

我想在行之间加一条水平线。我尝试了很多方法，但都没有解决我的问题。请问该如何解决这个问题？

- PHPLover

1

从这里开始，那一行似乎是一个<hr/>.. 尝试将其添加到tr td中。 - BeNdErR

1

我看不到屏幕截图。 - Craig McQueen

5个回答

28

使用表头并在其中添加下划线

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

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

使用CSS可以为标题行设置样式，使每个单元格都具有底部边框。

- Andrew

2

您还需要删除ths之间的单元格间距，以便拥有连续边框。 - BeNdErR

17

请点击这里查看: 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;
}

- BeNdErR

0

<html>
<style>
  table {
    border: 1px solid black;
  }
</style>
<table>
  <thead>
    <tr>
      <th>Contents</th>
    </tr>
  </thead>
  <tbody>
    <td>
      <hr size="1px" color="black">
    </td>
    <tr>
      <td>
        Topic 1<br/> Topic 2<br/> Topic 3<br/> Topic 4<br/> Topic 5<br/>
      </td>
    </tr>
  </tbody>
</table>

</html>

- Shivam wonders

目前你的回答写得不太清楚。请编辑并添加更多细节，以帮助他人了解它如何回答所提出的问题。你可以在帮助中心找到有关编写良好答案的更多信息。 - Community

-2

类似这样：

<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>

告诉我那是否是你要找的。

- Jan-Willem de Boer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PhatHV · Accepted Answer

我使用这个技巧：

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