html表格内的行答案

【问题标题】：line inside html tablehtml表格内的行
【发布时间】：2016-08-02 23:52:24
【问题描述】：

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

但是为了使边框底部成为一行，我添加了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>

还有我的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; }

【问题讨论】：

请发布html，因为我们不知道html结构。

标签： html css border padding

【解决方案1】：

这有帮助吗？

使用table border-spacing: 0;

tr.line td {
  border-top: 2px solid black;
}

作品

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

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr class="line">
      <td></td>
      <td></td>
      <td>Sum C</td>
      <td>Sum D</td>
    </tr>
  </tbody>
</table>

【讨论】：

我需要它是一行

【解决方案2】：

HTML 表格的display 属性与 div 不同，它们的行为也不同。

table {
  border-collapse: collapse;
}
tbody {
    border-bottom: 2px solid black;
    border-collapse: separate;
    border-spacing: 4px; 
}

 <table style="width:50%">
 <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>   
 </thead>
  <tbody>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>    
  </tbody>
  <tfoot>
    <tr>
      <th>total</th>
      <td></td>
      <td>282</td>
    </tr>
  </tfoot>
</table>

同样在 jsfiddle 上：https://jsfiddle.net/c6mwh2cL/

也可以看看这个答案：tbody border not showing

另外，避免将<div> 放在表格中。一个表应该只有<thead>、<tbody>和<tfoot>元素，那些应该只有<tr>元素，那些应该只有<th>和<td>。语义有其目的，这就是它的呈现方式。

【讨论】：

【解决方案3】：

您的 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;
}

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

请注意，我还冒昧地将表格分成了一个thead、一个tbody 和一个tfoot。使用这样的结构，您将不需要像class="line" 这样的技巧来指示需要该行的tr；这现在可以自动确定（它是 tbody 中的最后一个 tr）。

【讨论】：

啊，把我打败了。也为页脚 +1