首页 文章

具有圆角的CSS表行边框

提问于
浏览 次
1

我正在尝试设置一个表格，使角落圆角，行（不是单元格）是实线 . 我遇到的问题是：

tr {
     border-bottom: solid;
}

DOES NOT WORK :(

到目前为止，这是我的代码：FIDDLE

How can I get continuous solid row borders for my table?

css

3 回答

  • 1

    您可以通过添加规则来实现实线：

    border-collapse: collapse;

    到父 <table> 元素的CSS;这将删除单元格之间的间距，从而导致原始演示边框中断 .

    table {
  background: red;
  border: 1px solid #000;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border-collapse: collapse;
}
td {
  border-bottom: 1px solid #000;
}

    <table>
  <tr>
    <td>Row one, cell one</td>
    <td>Row one, cell two</td>
  </tr>
  <tr>
    <td>Row two, cell one</td>
    <td>Row two, cell two</td>
  </tr>
  <tr>
    <td>Row three, cell one</td>
    <td>Row four, cell two</td>
  </tr>
</table>

    更新了JS Fiddle demo .

    为了让 <table> 具有弯曲的边框，我可以使用它的唯一方法是使用以下组合：

    overflow: hidden;

    不幸的是also hides the border，和：

    box-shadow: inset 0 0 0 1px #000;

    模仿（现在隐藏的）边框 .

    table {
  background: red;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border-collapse: collapse;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #000;
}
td {
  border-bottom: 1px solid #000;
}

    <table>
  <tr>
    <td>Row one, cell one</td>
    <td>Row one, cell two</td>
  </tr>
  <tr>
    <td>Row two, cell one</td>
    <td>Row two, cell two</td>
  </tr>
  <tr>
    <td>Row three, cell one</td>
    <td>Row four, cell two</td>
  </tr>
</table>

    更新了JS Fiddle demo .

    回复于
  • 0

    在 table 上使用 border-spacing: 0; . border-spacing 指定相邻表格单元格边框之间的距离 .

    table {
  ...
  border-spacing: 0;
}

    应该适合你 . 这是你修改过的小提琴 . http://jsfiddle.net/crz9hhkt/9/

    回复于
  • 2

    可能这样吗？

    table {
      background: red;
      border: 1px solid #000;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      border: solid;
    }
    回复于

相关问题