html - 如何减少营养成分表中线条的粗细？

Question

我这里有一个营养成分表：

http://jsfiddle.net/JackTurisma/Uv7Tq/

<div style="float: right; margin-right: 5px;">

我想减少线条的粗细，让它看起来更漂亮。

我是 HTML 新手，我尝试过更改所有内容，但没有成功。

我应该怎么办？

Answer 1

You can changing the thickness of the line by CSS line-height ant height of the element `height:

.thick {
  line-height:5px;
  height:5px;
}

Or you can use border instead of black lines

.border{
  border-bottom: 2px solid black;
}

This code you will place into the <style></style> tags and in html call <td colspan="3" class="thick">nbsp;</td>

#a = id="a"

.b = class="b"

Maybe this helps you: http://www.cssbasics.com/introduction-to-css/

Answer 2

我会完全删除 tr，如下所示：

<tr><td colspan="3">&nbsp;</td></tr>

我会添加border-bottom: 1px solid;到 td 中，如下所示：

<td colspan="3" bgcolor="white"><strong>Amount Per Serving</strong></td>

以上将变为：

<td colspan="3" bgcolor="white" style="border-bottom: 1px solid;"><strong>Amount Per Serving</strong></td>

Answer 3

您使用表数据元素 (td) 来实现该效果。因此，删除该 td 并设置 td 的高度，如下所示：

<td colspan="3" style="height: 1px;" bgcolor="#000"></td>

代替：

<td colspan="3" bgcolor="#000">&nbsp;</td>

但是您最好学习 css 而不是使用表格或 html 来进行样式设置。

Answer 4

表标记需要重写而不是调整。删除带有元素的行<td colspan="3" style="height: 1px;" bgcolor="#000"></td>。根据需要设置border单元格的属性。要创建一条连续的水平线，最好删除cellspacing和cellpadding属性，border-collapse: collapse在 CSS 中设置并使用 CSSpadding属性进行适当的列对齐（以确保数据项之间有足够的空间）。