1. 程式人生 > >table--邊框樣式設置

table--邊框樣式設置

流動性 方案 gin gif 總結 oct on() lips 但是

  1. table的兩個屬性
  2. 單行溢出點點顯示
  3. 表格的寬度設置
  4. 雙欄自適應連續連續英文符換行

1、table重置的兩個屬性:

①border-collapse: collapse; /* 為表格設置合並邊框模型 */

②border-spacing: 0; /* 設置在表格中的單元格之間出現的間距為0 */

代碼:

技術分享圖片
<div class="fz">
    <div style="width: 600px;" class="bg-grey p10">
        <table class="bg-white">
            <tr>
                <th>序號</th>
                <th>開始時間</th>
                <th>結束時間</th>
                <th>備註</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2014/8/2</td>
                <td>2015/1/1</td>
                <td>時間都去哪兒了</td>
                <td><a href="#">編輯</a></td>
            </tr>
        </table>
    </div>
</div>
技術分享圖片

當只重置了td,th{padding:0} 沒有設置邊框的效果

技術分享圖片

設置td{ border:1px solid #ff4136;}的效果

技術分享圖片

設置table { border-collapse: collapse; border-spacing: 0; }的效果

技術分享圖片

2、單行溢出點點顯示

.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

幾個必要條件是:

①一定要設定元素的寬度。

②white-space: nowrap; white-space 屬性設置如何處理元素內的空白。nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。(防止文字往下撐開;即使你定義了高度,省略號也不會出現,多余的文字會被剪裁掉。)

③overflow: hidden; (防止文字橫向撐開)

④text-overflow: ellipsis; ellipsis 當對象內文本溢出時顯示省略標記(...)

3、表格的寬度設置

td{ border:1px solid #ff4136;}
.title{ width: 100px;}
.kaiyao{ width: 200px;}
.time{ width: 120px;}
技術分享圖片
<div class="fz">
    <div style="width: 800px;" class="bg-grey p10">
        <table class="bg-white pctW">
            <tr>
                <th class="title">標題</th>
                <th class="kaiyao">概要</th>
                <th class="time">時間</th>
            </tr>
            <tr>
                <td>單行點點點顯示</td>
                <td>據說Chrome34+支持響應式圖片,就是直接&lt;img&gt;標簽上使用特定屬性,就可以實現圖片自動的響應式獲取,大夥可以試試~</td>
                <td>2014-04-09 23:51</td>
            </tr>
            <tr>
                <td>連續字符換行</td>
                <td>zheduanzhongwenpinyinzhemechangwojiubuxingbuhuanhangyaobuliugezhongzizhileidemeirenfanyingjiusuanle</td>
                <td>2014-04-09 23:53</td>
            </tr>
        </table>
    </div>
</div>
技術分享圖片

運行效果:

技術分享圖片

問題:雖然為td設置了寬度,但因為單元格的流動性,使文字不存在溢出效果。而且表格的寬度是跟隨單元格內容多少自動計算尺寸。

解決辦法:添加

table{ table-layout: fixed;}

效果:

技術分享圖片

table-layout: fixed的作用在於,讓表格布局固定。

存在問題:中文不會溢出,英文溢出?表格設定的寬度仍不起作用?

解決:為“概要”的兩個單元格分別添加.ell 和.bk樣式

.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
.bk { word-wrap: break-word; }

運行效果:

技術分享圖片

存在問題:表格設定的寬度仍不起作用?。經計算,每個td都設定寬度的情況,單元格的實際寬度是按table寬度的比例計算。

例如:table的寬度為800px。 td的寬度分別為100px 200px 100px。在table-layout:fixed情況下。即為800的 1:2:1比例

實際td的寬度為:200px,400px,200px。如不想按比例計算,可以如下解決方案:

解決:刪除表格最後一個單元格即“時間”引用的寬度限制class “.time”

效果:

技術分享圖片

“標題”和“概要”的寬度即為設定的100px和200px;

總結:

(1)要想設置表格的寬度,其必然要添加的屬性是table-layout: fixed; 若沒有該屬性,即便設定了單元格的寬度.ell 和.bk也不會起作用。

(2)添加了table-layout: fixed屬性後,①單元格的寬度用百分比表示。②單元格的寬度用px表示的時候,最後一個單元格不要設置寬度。

4、雙欄自適應cell部分連續英文符換行

/*雙欄自適應cell部分連續英文符換行*/
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }

註意跟普通的浮動不一樣,浮動是環繞,這個是雙欄。

代碼:

.cell{ display: table-cell; *display: inline-block;}
技術分享圖片
<div class="fz">
    <div style="width: 600px;" class="bg-grey p10">
        <div>
            <img src=" images/xxx.jpg" class="l p10" width="100">
            <div class="cell">
                <p class="cell_bk">
                    1977年的今天,28歲的拉齊奧中場球員Luciano Re Cecconi和兩個朋友走入羅馬的一家珠寶店。不知為何,他突然想來個惡搞玩笑。進入珠寶店後他就大喊,"別動!打劫!"他隨後、也是最後的兩句話是在珠寶店主沖出開槍命中他後說的,"It‘s a joke!It‘s a Joke!"30分鐘後,他死了。
                    <br/><br/>
                    <span>//zxx:我xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
                    <h3>無處理</h3>
                </p>
            </div>
        </div>
    </div>
</div>
技術分享圖片

效果:(兼容各瀏覽器)

技術分享圖片

當設置圖片img的width為200的效果

技術分享圖片

註意:只能是兩欄效果,三欄時ie6/7瀏覽器有問題。

對比float可以可以實現兩欄效果,只是當圖片寬度改變的時候不是自適應,需同時改變右邊div的padding-left的值

<img src=" images/xxx.jpg" class="l p10" width="200">
      <div style="padding-left: 220px;">
              <p class="cell_bk"> 
。。。。。。。

table 設置表格有滾動條。

少說多做,代碼中有註釋:

技術分享圖片
 1 <!DOCTYPE HTML>
 2 <html>
 3 
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6         <title>設置表格有滾動條</title>
 7         <style>
 8             * {
 9                 margin: 0;
10                 padding: 0;
11             }
12             
13             table {
14                 /*設置相鄰單元格的邊框間的距離*/
15                 border-spacing: 0;
16                 /*表格設置合並邊框模型*/
17                 border-collapse: collapse;
18                 text-align: center;
19             }
20             /*關鍵設置 tbody出現滾動條*/
21             table tbody {
22                 display: block;
23                 height: 80px;
24                 overflow-y: scroll;
25             }
26             
27             table thead,
28             tbody tr {
29                 display: table;
30                 width: 100%;
31                 table-layout: fixed;
32             }
33             /*關鍵設置:滾動條默認寬度是16px 將thead的寬度減16px*/
34             table thead {
35                 width: calc( 100% - 1em)
36             }
37             
38             
39             table thead th {
40                 background: #ccc;
41             }
42             
43         </style>
44     </head>
45 
46     <body>
47         <table width="80%" border="1">
48             <thead>
49                 <tr>
50                     <th>姓名</th>
51                     <th>年齡</th>
52                     <th>出生年月</th>
53                     <th>手機號碼</th>
54                     <th>單位</th>
55                 </tr>
56             </thead>
57             <tbody>
58                 <tr>
59                     <td>張三</td>
60                     <td>18</td>
61                     <td>1990-9-9</td>
62                     <td>13682299090</td>
63                     <td>阿裏巴巴</td>
64                 </tr>
65                 <tr>
66                     <td>李四</td>
67                     <td>18</td>
68                     <td>1990-9-9</td>
69                     <td>13682299090</td>
70                     <td>阿裏巴巴與四十大盜</td>
71                 </tr>
72                 <tr>
73                     <td>王五</td>
74                     <td>18</td>
75                     <td>1990-9-9</td>
76                     <td>13682299090</td>
77                     <td>騰訊科技</td>
78                 </tr>
79                 <tr>
80                     <td>孟想</td>
81                     <td>18</td>
82                     <td>1990-9-9</td>
83                     <td>13682299090</td>
84                     <td>瀏陽河就業</td>
85                 </tr>
86             </tbody>
87         </table>
88     </body>
89 
90 </html>
技術分享圖片

效果:

技術分享圖片

表格外圍上下邊框、及題頭下邊框用實線顯示,列表中數據邊框以虛線顯示,但是始終不能實現。後經一個下午的努力,終於實現,現將實現方法貼出。

一、實現步驟

1、對列表、表頭、行分別使用樣式進行控制;

2、對列表,設置border-collapse為collapse,然後設置border-top-style,border-top-width,border-bottom-style,border-bottom-width屬性;

3、對表頭及行,均設置border-bottom-style,border-bottom-width屬性,但border-bottom-style屬性值不同,表頭為solid(實線),行為dotted(虛線,及點畫線);

二、代碼

1、demo.html源碼


<html>
<head>
<title>table外圍邊框樣式設置demo</title>

<!-- 頁面樣式 -->
<link rel="stylesheet" href="table.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>

<script language="javascript">
var jquery = $.noConflict();
jquery(document).ready(function(){
// 為頁面各元素添加樣式
jquery(‘.table_list‘).addClass(‘list‘);
jquery(‘.table_list tbody tr‘).addClass(‘dotted‘);
});
</script>
</head>
<body>
<table class="table_list">
<thead>
<tr>
<th><nobr>A</nobr></th>
<th><nobr>B</nobr></th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
</tr>
</tbody>
</table>
</body>
</html>

二、table.css源碼(為作區分,我將表頭的底邊框線設置為紅色)

table.list {
border-collapse: collapse;
border-top-style: solid;
border-top-color: #000000;
border-top-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #000000;
font-size: 15px;
}

tr.dotted {
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: #000000;
}

th {
border-bottom: 1px solid #FF0000;
}

table--邊框樣式設置