Question

我使用 CSS 和 HTML 来创建表格，在最后一行之前有一条水平线。水平线不在表格行上，而是在表格数据上。

#FormatTable {
  font-family: Tahoma;
  font-size: 13px;
}
table {
  border: 13px solid #33FFFF;
  border-collapse: collapse;
}
td {
  padding: 6px 14px;
}
tr.headerrow {
  font-weight: bold;
}
td.tac {
  text-align: center;
}
tr.aaa {
  border-bottom: 5px solid #000000;
}
tr.alt2 {
  font-weight: bold;
  height: 25px;
}

<div id="FormatTable">
  <table>
    <tr class="headerrow">
      <td>Item</td>
      <td>Manufacturer</td>
      <td>Size</td>
      <td class="tac">Unit Price</td>
      <td class="tac">Quantity</td>
      <td class="tac">Total Price</td>
    </tr>
    <tr class="rowcee">
      <td>Corn Flakes</td>
      <td>Kellog's</td>
      <td>18 oz.</td>
      <td class="tac">2.50</td>
      <td class="tac">1</td>
      <td class="tac">2.50</td>
    </tr>
    <tr class="rowdf">
      <td>Solid White tuna</td>
      <td>Starkist</td>
      <td>5 oz.</td>
      <td class="tac">2.79</td>
      <td class="tac">2</td>
      <td class="tac">5.58</td>
    </tr>
    <tr class="rowcee">
      <td>Cream of mushroom Soup</td>
      <td>Campbell's</td>
      <td>10.75 oz.</td>
      <td class="tac">1.00</td>
      <td class="tac">2</td>
      <td class="tac">2.00</td>
    </tr>
    <tr class="rowdf">
      <td>2% Low Fat Milk</td>
      <td>Safeway</td>
      <td>0.5 gal</td>
      <td class="tac">1.99</td>
      <td class="tac">1</td>
      <td class="tac">1.99</td>
    </tr>
    <tr class="aaa">
      <td>Extra-Wide Egg Noodles</td>
      <td>Golden Grain</td>
      <td>12 oz.</td>
      <td class="tac">0.87</td>
      <td class="tac">3</td>
      <td class="tac">2.61</td>
    </tr>


    <tr class="alt2">
      <td>Total</td>
      <td></td>
      <td></td>
      <td></td>
      <td class="tac">9</td>
      <td class="tac">14.68</td>
    </tr>

  </table>
</div>

Answer 1

你的td填充使得行比它中的数据更宽。尝试

td:first-child {
  padding: 6px 14px 6px 0px;
}
td:last-child {
  padding: 6px 0px 6px 14px;
}

（编辑）要在表格和边框之间填充，您需要在div周围放置边框，而不是表格。

#FormatTable { 
  font-family: Tahoma;
  font-size: 13px;

  padding: 30px;
  border: 13px solid #33FFFF;
  width: -webkit-min-content; 
  width: -moz-min-content;
}
table {
  border-collapse: collapse;
}

宽度说明符告诉div只能与内容一样宽，而不是全屏。您可能还想告诉单元格文本不要换行：

td {
  padding: 6px 14px;
  white-space: nowrap;
}

Answer 2

#FormatTable {
  font-family: Tahoma;
  font-size: 13px;
}
table {
  border: 13px solid #33FFFF;
  border-collapse: separate;
  border-spacing:0px;
  padding:15px;
}
td {
  padding: 6px 14px;
}
tr.headerrow {
  font-weight: bold;
}
td.tac {
  text-align: center;
}
   

 tr.aaa td{
      border-bottom: 5px solid #000000;
    }
tr.alt2 {
  font-weight: bold;
  height: 25px;
}

<div id="FormatTable">
  <table>
    <tr class="headerrow">
      <td>Item</td>
      <td>Manufacturer</td>
      <td>Size</td>
      <td class="tac">Unit Price</td>
      <td class="tac">Quantity</td>
      <td class="tac">Total Price</td>
    </tr>
    <tr class="rowcee">
      <td>Corn Flakes</td>
      <td>Kellog's</td>
      <td>18 oz.</td>
      <td class="tac">2.50</td>
      <td class="tac">1</td>
      <td class="tac">2.50</td>
    </tr>
    <tr class="rowdf">
      <td>Solid White tuna</td>
      <td>Starkist</td>
      <td>5 oz.</td>
      <td class="tac">2.79</td>
      <td class="tac">2</td>
      <td class="tac">5.58</td>
    </tr>
    <tr class="rowcee">
      <td>Cream of mushroom Soup</td>
      <td>Campbell's</td>
      <td>10.75 oz.</td>
      <td class="tac">1.00</td>
      <td class="tac">2</td>
      <td class="tac">2.00</td>
    </tr>
    <tr class="rowdf">
      <td>2% Low Fat Milk</td>
      <td>Safeway</td>
      <td>0.5 gal</td>
      <td class="tac">1.99</td>
      <td class="tac">1</td>
      <td class="tac">1.99</td>
    </tr>
    <tr class="aaa">
      <td>Extra-Wide Egg Noodles</td>
      <td>Golden Grain</td>
      <td>12 oz.</td>
      <td class="tac">0.87</td>
      <td class="tac">3</td>
      <td class="tac">2.61</td>
    </tr>


    <tr class="alt2">
      <td>Total</td>
      <td></td>
      <td></td>
      <td></td>
      <td class="tac">9</td>
      <td class="tac">14.68</td>
    </tr>

  </table>
</div>

样式表在表格数据下绘制一条线

2 个答案: