html表格中的行

Question

html表格中的行

我正在尝试同时使用padding和border-bottom在html中获取此表：

但是，为了使边框底线成为我添加的线，border-collapse: collapse;而现在又没有填充线，如何同时使用两者？

这是我的html代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="exe2CSS3.css">
</head>
<body>
<table>
<div>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even line">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</div>
</table>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

和我的CSS代码：

table {    
font-family:Tahoma; font-size:13px; border: 10px solid #d0d0ff; margin: 
25px 0 0 25px; border-collapse: collapse; padding: 20px 20px 20px 20px;
}
th { text-align:left; padding: 0 10px; }
{td,th}.center { text-align:center; }
td { padding: 0 10px;}     
tr.line { border-bottom: 2px solid black; }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mr *_*ter 5

您的HTML和CSS中有错误。纠正这些问题后，只需设置border-spacing: 0而不是即可border-collapse: collapse。这样看来效果很好。

table {
  font-family: Tahoma;
  font-size: 13px;
  border: 10px solid #d0d0ff;
  margin: 25px 0 0 25px;
  border-collapse: separate;
  border-spacing:0;
  padding: 20px;
}

th, td {
  text-align: left;
  padding: 0 10px;
}
th.center, td.center {
  text-align: center;
}

tbody tr:last-child td {
  border-bottom: 2px solid black;
}

Run Code Online (Sandbox Code Playgroud)

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Manufacturer</th>
      <th>Size</th>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total Price</th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td>Corn Flakes</td>
      <td>Kellogg's</td>
      <td>18 oz.</td>
      <td class="center">2.50</td>
      <td class="center">1</td>
      <td class="center">2.50</td>
    </tr>
    <tr class="odd">
      <td>Solid White Tuna</td>
      <td>Starkist</td>
      <td>5 oz</td>
      <td class="center">2.79</td>
      <td class="center">2</td>
      <td class="center">5.58</td>
    </tr>
    <tr class="even">
      <td>Cream of Mushroom Soup</td>
      <td>Campbell's</td>
      <td>10.75 oz</td>
      <td class="center">1.00</td>
      <td class="center">2</td>
      <td class="center">2.00</td>
    </tr>
    <tr class="odd">
      <td>2% Lowfat Milk</td>
      <td>Safeway</td>
      <td>0.5 gal</td>
      <td class="center">1.99</td>
      <td class="center">1</td>
      <td class="center">1.99</td>
    </tr>
    <tr class="even">
      <td>Extra-Wide Egg Noodles</td>
      <td>Golden Grain</td>
      <td>12 oz</td>
      <td class="center">0.87</td>
      <td class="center">3</td>
      <td class="center">2.61</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="hide">
      <th>Total</th>
      <th></th>
      <th></th>
      <th></th>
      <th class="center">9</th>
      <th class="center">14.68</th>
    </tr>
</table>

Run Code Online (Sandbox Code Playgroud)

请注意，我还自由地将桌子分为戏剧，肢体和脚掌。有了这样的结构，您将不需要技巧class="line"来指示需要该行的tr。现在可以自动确定（这是tbody中的最后一个tr）。

归档时间：	9 年，6 月前
查看次数：	342 次
最近记录：	9 年，6 月前