如何删除表格中的水平线？

Question

任何想法，如何从表格中删除水平线？

css，html

<table border="1" style="width:100%; border-collapse: collapse">

            <tr>
                <th>Prepared By:</th>
                <th>Released By:</th>
                <th>Trucker's Acknowledgement</th>
            </tr>
            <tr>
                <td><font size="1">/*auto populated*/</font></td>
                <td><font size="1">/*auto populated*/</font></td>
                <td><font size="1">Driver : ______________                Helper: ______________ </font></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><font size="1">Signature/Date</font></td>
                <td><font size="1">Signature/Date</font></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td><font size="1">Contact Nos. : ______________</font></td>
            </tr>
        </table>

我只想删除水平线表

Answer 1

基本上，水平线是border-bottom css属性。因此，将其设置为0将会删除水平线。

编辑：

将一个类添加到表中，以便仅此特定类的表会受到影响。

尝试一下：

.table-modify tr {
  border-bottom: 0;
  }

<table class="table-modify" border="1" style="width:100%; border-collapse: collapse">

  <tr>
    <th>Prepared By:</th>
    <th>Released By:</th>
    <th>Trucker's Acknowledgement</th>
  </tr>
  <tr>
    <td>
      <font size="1">/*auto populated*/</font>
    </td>
    <td>
      <font size="1">/*auto populated*/</font>
    </td>
    <td>
      <font size="1">Driver : ______________ Helper: ______________ </font>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <font size="1">Signature/Date</font>
    </td>
    <td>
      <font size="1">Signature/Date</font>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <font size="1">Contact Nos. : ______________</font>
    </td>
  </tr>
</table>

Answer 2

请不要编写全局th或td CSS ，它会影响所有tables th/td。在表格中添加table-no-bottom-border之类的自定义类，并仅为此表格编写无底边框 CSS。所有提及的更新都包含在下面的代码段中。希望对您有帮助。谢谢

.table-no-bottom-border {
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
  width:100%; 
}

.table-no-bottom-border th,
.table-no-bottom-border td {
  border-top: 0;
  border-bottom: 0;
  border-right: 1px solid #000;
}

.table-no-bottom-border th:last-child,
.table-no-bottom-border td:last-child {
  border-right: 0;
}

<table class="table-no-bottom-border" cellspacing="0">
  <tr>
      <th>Prepared By:</th>
      <th>Released By:</th>
      <th>Trucker's Acknowledgement</th>
  </tr>
  <tr>
      <td><font size="1">/*auto populated*/</font></td>
      <td><font size="1">/*auto populated*/</font></td>
      <td><font size="1">Driver : ______________                Helper: ______________ </font></td>
  </tr>
  <tr>
      <td>&nbsp;</td>
      <td><font size="1">Signature/Date</font></td>
      <td><font size="1">Signature/Date</font></td>
  </tr>
  <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><font size="1">Contact Nos. : ______________</font></td>
  </tr>
</table>

Answer 3

对于表td，只给border-top和border-bottom不设任何值。它将删除所有td的水平边框。而且，如果您还想从表格标题中删除水平线，则只需为表格的第一个边框赋予底线。

th {
  border-bottom: none;
}

否则，仅在表td中提供CSS属性。

 td {
      border-top: none;
      border-bottom: none;
   }

<table border="1" style="width:100%; border-collapse: collapse">
            <tr>
                <th>Prepared By:</th>
                <th>Released By:</th>
                <th>Trucker's Acknowledgement</th>
            </tr>
            <tr>
                <td><font size="1">/*auto populated*/</font></td>
                <td><font size="1">/*auto populated*/</font></td>
                <td><font size="1">Driver : ______________                Helper: ______________ </font></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><font size="1">Signature/Date</font></td>
                <td><font size="1">Signature/Date</font></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td><font size="1">Contact Nos. : ______________</font></td>
            </tr>
</table>

Answer 4

1。）@Hassan Siddiqui主人。