从HTML表格中删除边框

时间：2017-11-07 16:33:19

标签： html css twitter-bootstrap

我想从以下代码段的第一行删除边框（水平和垂直）行：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <br /><br /><br /><table id="myHeader" class="table  table-bordered table-responsive">
        <tr style="border: none;">
            <td colspan="4" style="border: none;">
                <h1 class="text-center">Company</h1>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <h1 class="text-center">Number</h1>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
            </td>
            <td colspan="2">
                <h3><span style="float: right;">Date</span></h3>
            </td>
        </tr>
        <tr>
            <th>Sr.</th>
            <th>Item</th>
            <th>Qty</th>
            <th>Amount</th>
        </tr>
        <tbody>
            <tr>
                <td>1</td>
                <td>Shirt (D.C)</td>
                <td>5</td>
                <td>200</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Shirt (Iron)</td>
                <td>5</td>
                <td>200</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
                <td><strong>Total:</strong></td>
                <td><strong>400</strong></td>
            </tr>
        </tbody>
    </table>

我尝试了以下代码但未检测到任何更改！

尝试：

<tr style="border: none;">
<td colspan="4" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>

我不希望为表格的第一行显示任何类型的行（水平和垂直）。即：Company一个。

3 个答案:

答案 0 :(得分：3)

在样式表中添加@media print规则，并删除table和第一个单元格上的边框。

body {
  /* for demo */
  margin: 20px !important;
}

#myHeader > tbody tr:first-of-type td {
  border-color: #f9f9f9;
  border-bottom: 0;
}

#myHeader tr:nth-of-type(2) td {
  border-top: none;
}

@media print {
  table {
    border: 0 !important;
  }
  #myHeader tr:first-of-type td {
    border: 0 !important;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">
  <tr>
    <td colspan="4">
      <h1 class="text-center">Company</h1>
    </td>
  </tr>
  <tr>
    <td colspan="4">
      <h1 class="text-center">Number</h1>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
    </td>
    <td colspan="2">
      <h3><span style="float: right;">Date</span></h3>
    </td>
  </tr>
  <tr>
    <th>Sr.</th>
    <th>Item</th>
    <th>Qty</th>
    <th>Amount</th>
  </tr>

    <tr>
      <td>1</td>
      <td>Shirt (D.C)</td>
      <td>5</td>
      <td>200</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shirt (Iron)</td>
      <td>5</td>
      <td>200</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
      <td><strong>Total:</strong></td>
      <td><strong>400</strong></td>
    </tr>

</table>

答案 1 :(得分：2)

你在公司上没有任何边界，但你在桌子和号码上有border，这是围绕公司的边界。删除它们就可以了解

＆＃13;
＆＃13; 
@media print {
  table {
    border: 0 !important;
  }
  
}
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<br /><br /><br />
<table id="myHeader" class="table  table-bordered table-responsive" style="border:none;">
  <tr class="rem" style="border: none;">
    <td colspan="4" class="rem" style="border: none;">
      <h1 class="text-center">Company</h1>
    </td>
  </tr>
  <tr>
    <td colspan="4" class="rem" style="border:none;">
      <h1 class="text-center">Number</h1>
    </td>
  </tr>
  <tr>
    <td colspan="2">
      <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
    </td>
    <td colspan="2">
      <h3><span style="float: right;">Date</span></h3>
    </td>
  </tr>
  <tr>
    <th>Sr.</th>
    <th>Item</th>
    <th>Qty</th>
    <th>Amount</th>
  </tr>
  <tbody>
    <tr>
      <td>1</td>
      <td>Shirt (D.C)</td>
      <td>5</td>
      <td>200</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Shirt (Iron)</td>
      <td>5</td>
      <td>200</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
      <td><strong>Total:</strong></td>
      <td><strong>400</strong></td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

The border property was from the linked stylesheet. Updated your code by adding this - style="border:none !important" to both company and number.
Works fine now. But your code can be cleaner if you separate your css from your html.








    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <br /><br /><br /><table id="myHeader" class="table  table-bordered table-responsive">
            <tr style="border: none;">
                <td colspan="4" style="border:none !important" >
                    <h1 class="text-center">Company</h1>
                </td>
            </tr>
            <tr>
                <td colspan="4" style="border:none !important" >
                    <h1 class="text-center">Number</h1>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
                </td>
                <td colspan="2">
                    <h3><span style="float: right;">Date</span></h3>
                </td>
            </tr>
            <tr>
                <th>Sr.</th>
                <th>Item</th>
                <th>Qty</th>
                <th>Amount</th>
            </tr>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Shirt (D.C)</td>
                    <td>5</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Shirt (Iron)</td>
                    <td>5</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
                    <td><strong>Total:</strong></td>
                    <td><strong>400</strong></td>
                </tr>
            </tbody>
        </table>







_____________________________________________

更新代码

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <br /><br /><br /><table id="myHeader" class="table  table-bordered table-responsive">
            <tr style="border: none;">
                <td colspan="4" style="border:none !important" >
                    <h1 class="text-center">Company</h1>
                </td>
            </tr>
            <tr>
                <td colspan="4" style="border:none !important" >
                    <h1 class="text-center">Number</h1>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>
                </td>
                <td colspan="2">
                    <h3><span style="float: right;">Date</span></h3>
                </td>
            </tr>
            <tr>
                <th>Sr.</th>
                <th>Item</th>
                <th>Qty</th>
                <th>Amount</th>
            </tr>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Shirt (D.C)</td>
                    <td>5</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Shirt (Iron)</td>
                    <td>5</td>
                    <td>200</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>
                    <td><strong>Total:</strong></td>
                    <td><strong>400</strong></td>
                </tr>
            </tbody>
        </table>
相关问题
最新问题