工作中经常用到,做一下笔记
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;
}
html
<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>