css Javascript html表格美化

最新推荐文章于 2024-05-12 17:47:42 发布

a385833253

最新推荐文章于 2024-05-12 17:47:42 发布

阅读量3.6k

点赞数

分类专栏： JavaScript 文章标签： html javascript css datagrid table function

本文链接：https://blog.csdn.net/a385833253/article/details/6578162

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

除了th表格其他行在鼠标有焦点时会改变当前颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>表格样式</title>
<style type="text/css">
body{
  margin: 6px;
  padding: 0;
  font-size: 12px;
  font-family: tahoma, arial;
  background: #fff;
}

table{
  width: 100%;
}
tr.odd{
  background: #fff;
}
tr.even{
  background: #eee;
}

div.datagrid_div{
width: 100%;
border: 1px solid #999;
}

/*****************样式1*******************/
table.datagrid1{
  border-collapse: collapse;
  border-bottom: 1px solid #666;
}
table.datagrid1 th{
  color: #333;
  padding: 3px;
  font-family: monospace;
  background: #9cf;
  text-align: left;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
table.datagrid1 td{
  padding: 3px;
  border-top: 1px solid #ccc;
}

/*****************样式2*******************/
table.datagrid2{
  border-collapse: collapse;
}
table.datagrid2 th{
  text-align: left;
  background: #9cf;
  padding: 3px;
  border: 1px #333 solid;
}
table.datagrid2 td{
  padding: 3px;
  border: none;
  border:1px #333 solid;
}

/*****************样式3*******************/
table.datagrid3{
  border-collapse: separate;
}
table.datagrid3 th{
  text-align: left;
  background: #ddd;
  padding: 3px;
  border: 0px solid #fff;
}
table.datagrid3 td{
  padding: 3px;
  border: 0px solid #fff;
}

/*****************样式4*******************/
table.datagrid4{
  border-collapse: collapse;
}
table.datagrid4 th{
  text-align: left;
  background: #ddd;
  padding: 3px;
  border: none;
}
table.datagrid4 td{
  padding: 3px;
  border: none;
  border-top: 1px solid #fff;
}

tr:hover,
tr.hover{
background: #9cf;
}

</style>

  function stripe(table) {
   var trs = table.getElementsByTagName("tr");
   for(var i=1; i<trs.length; i++){
    var tr = trs[i];
    tr.className = i%2 != 0? 'odd' : 'even';
    add_event(tr);
   }
  }

<tr>
  <td>纽期所原油</td>
  <td>54.39</td>
  <td>-0.56</td>
</tr>
<tr>
  <td>纽约期金</td>

  <td>738.5</td>
  <td>5.8</td>
</tr>
<tr>
  <td>CBOT大豆</td>
  <td>905.25</td>
  <td>3.25</td>

</tr>
</table>

<table class="datagrid2">
<tr>
  <th>合约</th>
  <th>最新价</th>
  <th>涨跌</th>
</tr>
<tr>
  <td>CBOT大豆</td>
  <td>905.25</td>
  <td>3.25</td>

</tr>
<tr>
  <td>ideawu.net</td>
  <td>381.25</td>
  <td>1.25</td>
</tr>
<tr>

  <td>CBOT小麦</td>
  <td>548.5</td>
  <td>-1</td>
</tr>
</table>

<div class="datagrid_div">
<table class="datagrid3">
<tr>
  <th>合约</th>
  <th>最新价</th>
  <th>涨跌</th>
</tr>
<tr>
  <td>CBOT大豆</td>
  <td>905.25</td>
  <td>3.25</td>

</tr>
<tr>
  <td>ideawu.net</td>
  <td>381.25</td>
  <td>1.25</td>
</tr>
<tr>

  <td>CBOT小麦</td>
  <td>548.5</td>
  <td>-1</td>
</tr>
</table>
</div>

<div class="datagrid_div">
<table class="datagrid4">
<tr>
  <th>合约</th>
  <th>最新价</th>
  <th>涨跌</th>
</tr>
<tr>
  <td>CBOT大豆</td>
  <td>905.25</td>
  <td>3.25</td>

</tr>
<tr>
  <td>ideawu.net</td>
  <td>381.25</td>
  <td>1.25</td>
</tr>
<tr>

  <td>CBOT小麦</td>
  <td>548.5</td>
  <td>-1</td>
</tr>
</table>
</div>
</div>
</body>
</html>

a385833253

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css Javascript html表格美化

除了th表格其他行在鼠标有焦点时会改变当前颜色 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">表格样式body{ margin: 6px; padding: 0; font-size: 12px; font-family: tahoma, arial;
复制链接

扫一扫

专栏目录