/* CSS Document */
table {
    width: 95%;
    border-collapse: collapse;
    margin: auto;
    font-size: medium;
    table-layout: fixed;
}

/* Zebra striping */
tr:nth-of-type(odd) {
    background: #eee;
}

th {
    background: #003366;
    color: white;
    font-weight: bold;
}

th {
    padding: 3px;
    border: 1px solid #ccc;
    text-align: center;
}

td {
    padding: 3px;
    border: 1px solid #ccc;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.field1
{
    width:25%;
}

.field2
{
    width:75%;
}

/*
针对屏幕宽度小于760px的设备专门优化的CSS
*/ @media only screen and (max-width: 320px) {
    table {
        margin-top: 5%;
        display: block;
        font-size: medium;
    }
    /* 拆解掉原先的表格样式 */ thead, tbody, th, td, tr {
        display: block;
    }
    /* 隐藏表头 */
    thead {
        display: none;
    }

    tr {
        border: 1px solid #ccc;
    }

    td {
        /* 模拟行的显示 */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 30%;
    }

        td:before {
            /* 模拟表头 */
            position: absolute; /* Top/left values mimic padding */
            top: 1%;
            left: 1%;
            width: 28%;
            white-space: nowrap;
        }
        /*其它表格信息*/
        td:nth-of-type(1):before {
            content: "日期";
        }

        td:nth-of-type(2):before {
            content: "訊息";
        }
}