Html 表的无边框标题

我想要实现的是：

最左边的标题列没有边框，但它是表的一部分

我尝试了以下HTML：

<table class="my-table" style="border-left: 0">
    <tr>
        <td style="border-left: 0;border-top: 0; border-bottom: 0">x</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td style="border-left: 0;border-top: 0; border-bottom: 0">f(x)</td>
        <td>1</td>
        <td>4</td>
        <td>9</td>
    </tr>
</table>

但第1列的上下边框仍然存在

---

我知道我可以使用两个绝对大小的表来解决问题，但也许有一种很好的方法可以在一个表中解决这个问题？

删除

表上的边框

，它就可以工作了

---

删除

表上的边框

，它就可以工作了

---

删除表的边框，因为您正在给

表添加边框。my-table td

它将包装所有

td

的所有侧面，因此无需给

表添加边框

table.my-table {
    border-collapse: collapse;
}

table.my-table{
边界塌陷：塌陷；
}
table.my-table td{
边框：1px纯灰；
填充：0.5em；
文本对齐：居中；
}

x
1.
2.
3.
f（x）
1.
4.
9

删除表格的边框，因为您正在为

表格添加边框。my-table td

它将包装所有

td

的所有侧面，因此无需为

表格添加边框

table.my-table {
    border-collapse: collapse;
}


table.my-table{
边界塌陷：塌陷；
}
table.my-table td{
边框：1px纯灰；
填充：0.5em；
文本对齐：居中；
}

x
1.
2.
3.
f（x）
1.
4.
9

x
1.
2.
3.
f（x）
1.
4.
9


把你的html改成这个。您刚刚删除了td的边框，甚至应该删除表的边框


x
1.
2.
3.
f（x）
1.
4.
9


把你的html改成这个。您刚刚删除了td的边框，甚至应该删除表的边框

CSS

table.my-table {
 border-collapse: collapse;
}
table.my-table td {
 border: 1px solid grey;
 padding: 0 0.5em;
 text-align: center;
}
tr > :first-child{
 border:none !important;
}

HTML


x
1.
2.
3.
f（x）
1.
4.
9
CSS

HTML


x
1.
2.
3.
f（x）
1.
4.
9

<table class="my-table" style="border:none;">
<tr>
    <td style="border:none;">x</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
<tr>
    <td style="border:none;">f(x)</td>
    <td>1</td>
    <td>4</td>
    <td>9</td>
</tr>

table.my-table {
 border-collapse: collapse;
}
table.my-table td {
 border: 1px solid grey;
 padding: 0 0.5em;
 text-align: center;
}
tr > :first-child{
 border:none !important;
}

<table class="my-table">
 <tr>
    <td>x</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
 </tr>
 <tr>
    <td>f(x)</td>
    <td>1</td>
    <td>4</td>
    <td>9</td>
 </tr>
</table>