快捷导航
蚂蚁部落 网站首页 实例代码 CSS实例 查看内容

css细线表格代码实例

2017-5-8 13:04| 发布者: admin| 查看: 323| 评论: 0

table表格的应用还是十分广泛的,细线表格在外观上较为美观。

下面分享一个能够应用于实际项目中的细线表格代码。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
#_head {
  background-color: green;
}
#_head {
  text-align: center;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #c0c0c0;
  width: 300px;
}
th,td {
  border: 1px solid #d0d0d0;
  color: #404060;
  padding: 10px;
}
th {
  background-color: #09c;
  font: bold 16px "微软雅黑";
  color: #fff;
}
td {
  font: 14px "微软雅黑";
  text-align: center;
}
</style>
</head>
<body>
<div id="wrapbox">
  <table>
    <thead id="_head">
      <tr>
        <th><input type="checkbox" id="qx"></th>
        <th>菜名</th>
        <th>厨师</th>
        <th>价格</th>
      </tr>
    </thead>
    <tbody id="_tbody">
      <tr>
        <td><input type="checkbox"></td>
        <td>红烧鱼</td>
        <td>张一</td>
        <td>18</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>红烧肉</td>
        <td>张二</td>
        <td>18</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>红烧狮子头</td>
        <td>张三</td>
        <td>18</td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>红烧小青菜</td>
        <td>张四</td>
        <td>18</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-8-19 06:01 , Processed in 0.073285 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部