<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title> new document </title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
    <style> .process-bar {
        width: 100px;
        display: inline-block;
        *zoom: 1;
    }

    .pb-wrapper {
        border: 1px solid gray;
        border-style: solid none;
        position: relative;
        background: #cfd0d2;
    }

    .pb-container {
        border: 1px solid gray;
        border-style: none solid;
        height: 12px;
        position: relative;
        left: -1px;
        margin-right: -2px;
        font: 1px/0 arial;
        padding: 1px;
    }

    .pb-highlight {
        position: absolute;
        left: 0;
        top: 0;
        _top: 1px;
        width: 100%;
        opacity: 0.6;
        filter: alpha(opacity=60);
        height: 6px;
        background: white;
        font-size: 1px;
        line-height: 0;
        z-index: 1
    }

    .pb-text {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        text-align: center;
        font: 10px/12px arial;
    }

    .pb-value {
        height: 100%;
        width: 50%;
        background: #19d73d;
    }

    .pb-text {
        color: black;
    }

    .grid {
        border-collapse: collapse;
        font: 12px/1.5 arial;
        background: white;
        border: 1px solid gray;
        width: 500px;
    }

    .grid td, .grid th {
        padding: 5px
    }

    .grid th {
        background: #eee;
        color: black;
        text-align: left;
        font-weight: normal
    } </style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="1" class="grid" rules="rows" frame="void">
    <tr>
        <th> 项目ID</th>
        <th> 项目名称</th>
        <th> 开始时间</th>
        <th> 项目进度</th>
    </tr>
    <tr>
        <td> #200912110001</td>
        <td> 项目管理系统</td>
        <td> 2010-12-01</td>
        <td>
            <div class="process-bar">
                <div class="pb-wrapper">
                    <div class="pb-highlight"></div>
                    <div class="pb-container">
                        <div class="pb-text">99%</div>
                        <div class="pb-value" style="width:99%"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td> #2009654001</td>
        <td> ERP</td>
        <td> 2010-12-01</td>
        <td>
            <div class="process-bar">
                <div class="pb-wrapper">
                    <div class="pb-highlight"></div>
                    <div class="pb-container">
                        <div class="pb-text">10%</div>
                        <div class="pb-value" style="width:10%"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td> #200916540001</td>
        <td> OA</td>
        <td> 2010-12-01</td>
        <td>
            <div class="process-bar">
                <div class="pb-wrapper">
                    <div class="pb-highlight"></div>
                    <div class="pb-container">
                        <div class="pb-text">89%</div>
                        <div class="pb-value" style="width:89%"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td> #20091214501</td>
        <td> 河蟹养殖系统</td>
        <td> 2010-12-01</td>
        <td>
            <div class="process-bar">
                <div class="pb-wrapper">
                    <div class="pb-highlight"></div>
                    <div class="pb-container">
                        <div class="pb-text">54%</div>
                        <div class="pb-value" style="width:54%"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td> #200912110001</td>
        <td> 项目管理系统</td>
        <td> 2010-12-01</td>
        <td>
            <div class="process-bar">
                <div class="pb-wrapper">
                    <div class="pb-highlight"></div>
                    <div class="pb-container">
                        <div class="pb-text">99%</div>
                        <div class="pb-value" style="width:99%"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td> #2009654001</td>
        <td> ERP</td>
        <td> 2010-12-01</td>
        <td>
            <div class="process-bar">
                <div class="pb-wrapper">
                    <div class="pb-highlight"></div>
                    <div class="pb-container">
                        <div class="pb-text">10%</div>
                        <div class="pb-value" style="width:10%"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td> #200916540001</td>
        <td> OA</td>
        <td> 2010-12-01</td>
        <td>
            <div class="process-bar">
                <div class="pb-wrapper">
                    <div class="pb-highlight"></div>
                    <div class="pb-container">
                        <div class="pb-text">89%</div>
                        <div class="pb-value" style="width:89%"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td> #20091214501</td>
        <td> 河蟹养殖系统</td>
        <td> 2010-12-01</td>
        <td>
            <div class="process-bar">
                <div class="pb-wrapper">
                    <div class="pb-highlight"></div>
                    <div class="pb-container">
                        <div class="pb-text">54%</div>
                        <div class="pb-value" style="width:54%"></div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
</table>
</body>
</html>
