如何在 angular material 中制作内边框 table

Question

我想用 angular-material 制作一个 table，像这样：

<div class="xo-container" layout="column"  layout-align="center center">
    <div layout="row">
        <div class="cell" flex="33">1</div>
        <div class="cell" flex="33">2</div>
        <div class="cell" flex>3</div>
    </div>

    <div layout="row">
        <div class="cell" flex="33">1</div>
        <div class="cell" flex="33">2</div>
        <div class="cell" flex>3</div>
    </div>

    <div layout="row">
        <div class="cell" flex="33">1</div>
        <div class="cell" flex="33">2</div>
        <div class="cell" flex>3</div>
    </div>
</div>

我只想看到这个结构的内部边界。我怎样才能做到这一点？

Answer 1

在您的情况下，您需要将三行 class 定义为 first-row、row 和 last-row 用于顶部和底部边框以及三个 cell class 为 first-cell , cell 和 last-cell 左右边框。

CSS 文件

div.first-row div{
 border-bottom: 1px solid black;
}

div.row div{
 border-top: 1px solid black;
 border-top: 1px solid black;
}

div.last-row div{
border-top: 1px solid black;
}

div.first-cell {
 border-right: 1px solid black;
}

div.cell {
 border-right: 1px solid black;
 border-left: 1px solid black;
}

div.last-cell {
 border-left: 1px solid black;
}

HTML 文件

<div layout="column" flex style='background-color:red'>
 <span flex="10"></span>
<div layout="row" class="first-row">
    <div class="first-cell" flex="33">Content 1</div>
    <div class="cell" flex="33">Content 2</div>
    <div class="last-cell" flex>Content 3</div>
</div>

<div layout="row">
    <div class="first-cell" flex="33">Content 11</div>
    <div class="cell" flex="33">Content 22</div>
    <div class="last-cell" flex>Content 33</div>
</div>

<div layout="row" class="last-row">
    <div class="first-cell" flex="33">Content 111</div>
    <div class="cell" flex="33">Content 222</div>
    <div class="last-cell" flex>Content 333</div>
</div>

这是工作示例。 http://codepen.io/next1/pen/PNxxyR

如何在 angular material 中制作内边框 table

How to make an inner-bordered table in angular material

css

angularjs

angular-material