css在td方面的用法

最新推荐文章于 2021-08-03 18:59:12 发布

overmind

最新推荐文章于 2021-08-03 18:59:12 发布

阅读量3k

点赞数

分类专栏： html+javascript 文章标签： css class header stylesheet border table

本文链接：https://blog.csdn.net/overmind/article/details/208825

版权

html+javascript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

test.css

td
{
     font-size:12px;
     color:#000000;
     text-align:center;
}

.index_listTable_itemSet{
   background-color:#efefef;
   padding-left:2px;
    border-top-width: 1px;
   border-right-width: 1px;
    border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-left-color:#A3A6AF;
    border-top-color:#ffffff;
    border-right-color:#ffffff;
    border-bottom-color:#A3A6AF;
}

.index_listTable_header{
    background-color:#C1D6EA;
    padding-left:2px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
   border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-left-color:#356A9F;
    border-top-color:#ffffff;
    border-right-color:#ffffff;
    border-bottom-color:#356A9F;
}

test.htm
<link href="./test.css" rel="stylesheet" type="text/css">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td width="125" nowrap class="index_listTable_header">功能名称</td>
  <td width="125" nowrap class="index_listTable_header">功能辅助键</td>
  <td width="125" nowrap class="index_listTable_header">删除</td>
  <td width="125" nowrap class="index_listTable_header">修改</td>
</tr>
<tr>
  <td width="100" height="22" align="center" nowrap class="index_listTable_itemSet" style="padding-left:5px;">1</a></td>
  <td width="100" height="22" align="center" nowrap class="index_listTable_itemSet" style="padding-left:5px;">2</td>
       <td width="100" height="22" align="center" nowrap class="index_listTable_itemSet" style="padding-left:5px;">3</a></td>
        <td width="100" height="22" align="center" nowrap class="index_listTable_itemSet" style="padding-left:5px;">4</a></td>
</tr>
<tr>
  <td width="100" height="22" align="center" nowrap class="index_listTable_itemSet" style="padding-left:5px;">5</a></td>
  <td width="100" height="22" align="center" nowrap class="index_listTable_itemSet" style="padding-left:5px;">6</td>
       <td width="100" height="22" align="center" nowrap class="index_listTable_itemSet" style="padding-left:5px;">7</a></td>
        <td width="100" height="22" align="center" nowrap class="index_listTable_itemSet" style="padding-left:5px;">8</a></td>
</tr>
</table>

在这里主要就是style的东西，比如说
td
{
font-size:12px;
color:#000000;
  text-align:center;
}

就相当于在html里面写上 <td style=" font-size:12px;  color:#000000;  text-align:center;">

主要就这样使用css的，真简单啊。