如何为行的顶部和底部边框线赋予颜色属性答案

【问题标题】：How to give a colour property to top and bottom border line of a row如何为行的顶部和底部边框线赋予颜色属性
【发布时间】：2018-12-10 11:54:11
【问题描述】：

我想知道如何为每行的顶部和底部边框线着色，并禁用它的边颜色，我附上了一张我想要实现的图片。

【问题讨论】：

请提供Minimal, Complete, and Verifiable example。请看指南how do I ask a good question?

标签： html css vue.js

【解决方案1】：

使用border-bottom/top（表示仅到top和bottom）

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

在这里学习：https://www.w3schools.com/css/css_border.asp

参见示例：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

<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 Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

【讨论】：

乐于助人:)

【解决方案2】：

如果边框用于 DIV：

border-top: 1px solid Green;

border-bottom: 1px solid Green;

希望对你有帮助。

【讨论】：

【解决方案3】：

你可以使用这样的东西

div
{
border-top-color:red;
border-bottom-color:red;
}

这将使颜色变为红色，希望这能解决你的疑问

【讨论】：

@לבנימלכה 对此感到抱歉