只使用水平线制作表格

Question

我该如何仅使用水平线在HTML和CSS中构建table？我尝试了很多东西，但无法使其工作。

类似于这样：

Name (空格) 年龄

---

Andre (空格) 12

---

Jose (空格) 16

---

- aconstancio

---

我尝试了这段代码： td { border-bottom: 1px solid black;border-collapse: collapse;}​但是线条只出现在每个<td>下面，而不是整行，就像我想要的那样。我尝试将CSS代码中的td替换为tr，但它没有起作用。 - aconstancio

Answer 1

可能像这样（jsfiddle）：

table {
    border-collapse: collapse;
    width: 100%;
}

tr {
    border-bottom: 1px solid #ccc;
}

th {
    text-align: left;    
}

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jose</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Alberto</td>
            <td>32</td>
        </tr>
    </tbody>
</table>

- Josh Beam

---

表格，行 { 边框：1像素实线黑色; 左边框：无; 右边框：无; 边框合并：合并; }这个完全正常。 - MechaCode

border-collapse: collapse; 这太疯狂了 - Rahul Bali

Answer 2

水平分割线的CSS代码如下：

th, td {
  border-bottom: 1px solid #ddd;
}

请参见：https://www.w3schools.com/css/css_table.asp。

- Deatk