转：Bootstrap表格元素处理

Bootstrap提供了一种基础.table样式、4种附加样式以及一个支持响应式布局的.table.responsive容器样式

下面是HTML模板

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="\Bootstrap-dist\css\bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>表格处理</h1>
<table class="table" contenteditable="true">
    <thead>
    <tr>
        <th>编号</th>
        <th>产品</th>
        <th>交付时间</th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>TB - Monthly</td>
        <td>01/04/2012</td>
        <td>Default</td>
    </tr>
    <tr class="success">
        <td>1</td>
        <td>TB - Monthly</td>
        <td>01/04/2012</td>
        <td>Approved</td>
    </tr>
    <tr class="error">
        <td>2</td>
        <td>TB - Monthly</td>
        <td>02/04/2012</td>
        <td>Declined</td>
    </tr>
    <tr class="warning">
        <td>3</td>
        <td>TB - Monthly</td>
        <td>03/04/2012</td>
        <td>Pending</td>
    </tr>
    <tr class="info">
        <td>4</td>
        <td>TB - Monthly</td>
        <td>04/04/2012</td>
        <td>Call in to confirm</td>
    </tr>
    </tbody>
</table>


</body>
</html>

点此展开HTML
View Code

以下是Bootstrap关于表格元素的处理

.table {                                       /*表格元素的处理*/
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;                     /*表格的底部添加外边距20px，主要用于控制表格与表格和其他元素之间距离*/
}
.table > thead > tr > th,                /*表头中的th,这段代码用的CSS子选择符*/
.table > tbody > tr > th,               /*表体中的th*/
.table > tfoot > tr > th,
.table > thead > tr > td,              /*表格中的一列*/
.table > tbody > tr > td,
.table > tfoot > tr > td {              /*实际上选中的是表格中的每一列*/
  padding: 8px;                          /*设置单元格内边距8px*/
  line-height: 1.42857143;              /*设置表格内元素的行高*/
  vertical-align: top;
  border-top: 1px solid #ddd;          /*在每行的顶部添加一条 1px的细线*/
}
.table > thead > tr > th {              /*为什么不跟上面一起写了呢，因为它只想给表头添加一条实现*/
  vertical-align: bottom;              /*vertical垂直的意思*/
  border-bottom: 2px solid #ddd;      /*表头添加一条2px的横线*/
}

要想应用Bootstrap提供的CSS表格样式，只需在table元素上，添加 class="table" 即可

添加背景条纹

要想给表格添加背景条纹就是在现有的.table样式基础上再应用一个table-striped样式即

HTML Usage:

<table class="table table-striped">
......
</table>

Bootstrap  Style

.table-striped > tbody > tr:nth-of-type(odd) {                 /*背景条纹处理,基于CSS3的nth-child选择器实现，这里选择的是奇数行*/
background-color: #6495ED;
}

显示效果

添加边框

要想给表格添加边框就是在现有的.table样式基础上再应用一个table-bordered样式即可

HTML Usage:

<table class="table table-bordered">
......
</table>

Bootstrap Style

.table-bordered {                  /*表格边框处理*/
  border: 1px solid #ddd;         /*整体边框*/
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {   /*每列边框添加*/
  border: 1px solid #ddd;                  /*单元格边框处理*/
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;              /*表头底部处理*/
}

转载自：http://www.cnblogs.com/tao-zi/p/4313484.html

posted @ 2017-08-28 11:14  蚂蚁Zz  阅读(113)  评论(0)    收藏  举报