logo标签列表

HTML表格中的行。

htmlcssborderpadding
3
我正在尝试在HTML中同时使用 padding 和 border-bottom 来制作这个表格：enter image description here但是为了让 border-bottom 只有一行，我添加了 border-collapse: collapse; ，现在我没有填充了，如何同时使用两者？enter image description here这是我的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结构。 - Leo the lion
3个回答
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;
}
<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）。
啊，你抢先加上了间距。页脚也加一分。 - mplungjan
0

这个有帮助吗？

使用 table border-spacing: 0;

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

运作正常

enter image description here

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>

我需要它成为一行 - Nofar
0

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

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>。语义有其目的，这就是它的呈现方式。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接