角度材料,md-grid-tile

时间:2016-03-31 15:02:43

标签: html css angularjs

有人可以帮助我让这个看起来更好一点。

enter image description here

我有三列,在第一列我需要放一些字幕,在它们下面有三行。在另外两行中我想添加一些数据,但需要与行对齐。所以例如我有“明确的质量”和 在它下面,我有“未检测到”,“误解”,然后我有“总计”。在中间栏我会添加数据,但需要与“未检测”,“误解”和“总计”对齐。其中明确定义的质量需要为空。

<div>

<md-toolbar layout-align="center center">
    <span>False Negative Responses</span>
</md-toolbar>
<div style="margin:15px">
    <md-grid-list md-cols="3" md-row-height="50px">

        <md-grid-tile><h4>Radiographic Feature Type</h4></md-grid-tile>
        <md-grid-tile><h4>You: Mean % Missed Feature</h4></md-grid-tile>
        <md-grid-tile><h4>ALL PARTICIPANTS: % Missed Feature</h4></md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <h4>Well defined mass</h4>
                <p>Undetected</p>
                <p>Misinterpreted</p>
                <p>Total</p>
            </div>
        </md-grid-tile>

        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>
            </div>
        </md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>
            </div>

        </md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <h4>Ill defined mass</h4>
                <p>Undetected</p>
                <p>Misinterpreted</p>
                <p>Total</p>
            </div>
        </md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>
            </div>
        </md-grid-tile>

        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>

            </div>
        </md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <h4>Spiculate defined mass</h4>
                <p>Undetected</p>
                <p>Misinterpreted</p>
                <p>Total</p>
            </div>
        </md-grid-tile>

        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>

            </div>
        </md-grid-tile>

        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>
            </div>
        </md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <h4>Architectural Distortion</h4>
                <p>Undetected</p>
                <p>Misinterpreted</p>
                <p>Total</p>
            </div>
        </md-grid-tile>

        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>

            </div>
        </md-grid-tile>

        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>

            </div>
        </md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <h4>Asymmetry</h4>
                <p>Undetected</p>
                <p>Misinterpreted</p>
                <p>Total</p>
            </div>
        </md-grid-tile>

        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>

            </div>
        </md-grid-tile>

        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>
            </div>
        </md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <h4>Calcification</h4>
                <p>Undetected</p>
                <p>Misinterpreted</p>
                <p>Total</p>
            </div>
        </md-grid-tile>


        <md-grid-tile>
            <div layout="column">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>
            </div>

        </md-grid-tile>

        <md-grid-tile>
            <div layout="column" layout-align="center" style="padding: 10px;">
                <p>HI</p>
                <p>Hi</p>
                <p>Hi</p>

            </div>
        </md-grid-tile>


    </md-grid-list>


</div>

这是我的代码。

0 个答案:

没有答案