使用CSS 实现状态表示

<html>

<style>

.activity-log table {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.activity-log table tr td:first-child {
    width: 50px;
    vertical-align: middle;
    text-align: center;
    position: relative;
    border-top: none;
}

.time-line {
    display: block;
    position: absolute;
    left: 50%;
    top: -1px;
    bottom: -1px;
}

.activity-log table tr td:nth-child(2) {
    padding-left: 0;
}

.completed {
        background: #5cb85c;
        border: 1px solid #4cae4c;
    }
	
.cancelled {
        background: #d9534f;
        border: 1px solid #d43f3a;
    }
    .job-status {
        width: 22px;
        height: 22px;
        -moz-border-radius: 50%;
        border-radius: 50%;
        color: white;
        display: inline-block;
        text-align: center;
        position: relative;
        z-index: 1;
    }

</style>

<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<div class="activity-log">

<table class="table ">
    <tbody>
        <tr>
                        <td>
                            <div class="job-status cancelled">
                                <i class="fa fa-check-circle" style="width: 15px;"></i>
                            </div>
                            <div class="time-line cancelled"></div>
                        </td>
<td>cancelled<br/><br/><br/></td>
    </tr>

  <tr>
                        <td>
                            <div class="job-status completed">
                                <i class="fa fa-check-circle" style="width: 15px;"></i>
                            </div>
                            <div class="time-line completed"></div>
                        </td>
<td>completed<br/><br/><br/></td>
    </tr>

  <tr>
                        <td>
                            <div class="job-status cancelled">
                                <i class="fa fa-check-circle" style="width: 15px;"></i>
                            </div>
                            <div class="time-line cancelled"></div>
                        </td>
<td>cancelled<br/><br/><br/><br/><br/></td>
    </tr>

  <tr>
                        <td>
                            <div class="job-status completed">
                                <i class="fa fa-check-circle" style="width: 15px;"></i>
                            </div>
                            <div class="time-line completed"></div>
                        </td>
<td>completed<br/><br/><br/></td>
    </tr>
</tbody>
</table>


</div>

</html>






你可能感兴趣的:(使用CSS 实现状态表示)