我需要把这张桌子弄得像照片上的一样桌子上的蓝线是我需要的。请帮我提前谢谢
<style>
td, th {
text-align: left;
padding: 8px;
}
table{
border: 1px solid #dddddd;
}
</style>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
</table>
最佳答案
插入此代码:
td:not(:last-child),th:not(:last-child) {
border-right: 1px solid blue;
}
table {
border-collapse: collapse;
//more code
}
td, th {
text-align: left;
padding: 8px;
}
td:not(:last-child),th:not(:last-child) {
border-right: 1px solid blue;
}
table {
border: 1px solid #dddddd;
border-collapse: collapse;
}
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
</table>