Skip to content

html,css表格

工作中经常用到,做一下笔记

*{
    padding:0;
    margin:0;
}
body{
    overflow-x:hidden;
}
    th,th{
    white-space:pre-line;
    word-wrap: break-word;
    word-break: break-all;
    text-align:center;
    height:50px;
    overflow:hidden;
    min-width:85px;
    font-size:14px !important;
}
#d_table_title th, #d_table_title td {
    width:1%;
    border:1px solid #dda551;
    background-color:#f0b660;
}
#d_table_content th, #d_table_content td {
    width:1%;
    border:1px solid #e5b66f;
}
#d_table_content tr{
    background-color:#ffdca7;
}
#d_table_content tr:hover{
    background-color:#dfc093;
}



  <div id="d_table_title" style="height:80px;width:100%;margin:0 auto;position:fixed;top:0px;background-color:#dde;z-index:222">
    <div style="">
    <table id="creative_table_title" style="border-collapse: collapse;width:80%;position:absolute;bottom:0;left:10%;">
       <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>
    </div>
</div>
<div id="d_table_content" style="width:80%;position:relative;left:10%">
    <div>
    <table id="creative_table_content" style="border-collapse: collapse;margin:80px 0px;width:100%">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
       <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>
    </div>
</div>