css中關于table的相關設置

kohoh_ 發(fā)布于2019-04-23 11:50 / 3218人閱讀

摘要：中設置的值一般為表格寬度的最大值，不能改變，即使內部的內容寬度超過也不能改變。所以在中只有討論設置的可能了，中的設置和幾個之間的設置有關。當幾個都沒有設置具體值時，平均分配總的值。還有一點要注意，就是的和的之間的關系。

一、設置好看的單邊框表格

　　1、一種實現(xiàn)方式

　　　　分別給table標簽和td標簽設置不在同一方向的border屬性，如下table設置‘左上’邊框，td設置‘右下’邊框。其他設置方式同樣可以實現(xiàn)。

table{            
            border-right: 1px solid;
            border-top: 1px solid;

            /*相鄰邊框被合并*/
            border-collapse:collapse;
}
td{
        border-left: 1px solid;
        border-bottom: 1px solid;
}

二、給表格設置居中，及文本居中

　　1、表格整體居中　　　?

table{ 
             margin:auto; 
 }

　　2、table文本居中

td{    
                
    text-align:center;
            
}

三、table的width和height設置

　　1、table中的width和height設置及其作用：

　　　　table中設置的height其實是設置個最小值，也就是當表格中的內容或者行高總值超過這個設置值時，會自動延長表格的height值，當表格中的內容或者行高沒有達到這個值時，會自動擴大到這個值。table中設置的width值一般為表格寬度的最大值，不能改變，即使內部的內容寬度超過也不能改變。（這個內部內容如果是圖片的話是可以改變表格寬度的。）

?????2、tr標簽中width和height設置及其作用：

　　　　tr標簽里面的width設置不起任何作用，因為從第一點可以看出，表格的width是不能改變的，tr標簽當然就不起作用了。所以在tr中只有討論height設置的可能了，tr中的height設置和幾個tr之間的設置有關。當幾個tr都設置了height的具體數(shù)值時，各個tr的height按照設置的值的比例來分配總的height值，注意這里說的是總的height值。當幾個tr都沒有設置height具體值時，平均分配總的height值。當有的tr設置了具體的數(shù)值，有的沒有設置具體的數(shù)值為默認時，先保證各個tr的基本需要，剩下的再滿足設置了具體值的tr，之后再全部給沒有設置具體值的tr。最后一種情況還要考慮總的寬度不夠tr總的設置值的情況，不夠的話要滿足tr的基本需要，這里會自動延長表格的height的。然后再考慮設置了heightr的tr，最后考慮沒有設置height的tr。

?　3、td標簽中width和height設置及其作用：

　　　　td標簽里面的width和height都是起作用的。先看td的width吧，某一個td的width是和所處的一列每個td的width都相關的，取其中最大的width作為這一列中每個td的width，這點是讓我們最混淆的地方，一定要從全局把握某個td的width，不能從這一個的width設置就斷言它的寬度就是多少，這樣是不準確的。當我們把每一列的寬度都弄清楚之后，事情就好辦了。這時候各個td之間的寬度分配按照第二條中各 tr的height分配規(guī)律，有一點不同的是全部是默認的情況下，各td的width不是平均分配，而是根據(jù)各自的實際內容按比例分配。再看看td的height設置吧，這個相對簡單一點了，不過各個td的height要看這個td所在的行的最大高度來確定這一行的每個td的height，然后各個行的高度情況和tr中的height分配原則是一樣的。還有一點要注意，就是td的height和tr的height之間的關系。首先肯定是根據(jù)內容的需要，在這個基礎上，再根據(jù)設置的值來確定，哪個設置的值大就按照哪個，如果一個設置了值一個沒有設置值，那么按照設置值的算。

?四、table文本格式設置

td{    
    font-weight: bold;
    font-size: 20px;
    font-family:"華文楷體";
            }

GPU云服務器云服務器 php中關于的運算阿里云服務器的相關設置 js table設置數(shù)據(jù)源 css設置

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/1238.html

關于CSS居中問題的一些總結

摘要：兼容性屬性兼容存在一定問題，高版本需要添加前綴父子第四使用通過父級元素布局將子框轉換為再設置子元素水平居中兼容性不支持父子第五水平垂直將水平居中和垂直居中的相結合兼容性屬性兼容性問題父子第六父相對子絕對，上下左右居中兼容性及以上父子前端頁面開發(fā)中關于內容居中的需求應用概率很大，自己搜集一些資料和總結關于css里的幾種居中效果實現(xiàn) 第一常用text-align:center先將子元素將...

Riddler 2019-08-30 14:14 評論0 收藏0
關于CSS居中問題的一些總結

摘要：兼容性屬性兼容存在一定問題，高版本需要添加前綴父子第四使用通過父級元素布局將子框轉換為再設置子元素水平居中兼容性不支持父子第五水平垂直將水平居中和垂直居中的相結合兼容性屬性兼容性問題父子第六父相對子絕對，上下左右居中兼容性及以上父子前端頁面開發(fā)中關于內容居中的需求應用概率很大，自己搜集一些資料和總結關于css里的幾種居中效果實現(xiàn) 第一常用text-align:center先將子元素將...

ISherry 2019-08-01 18:44 評論0 收藏0
HTML

摘要：目前，中關村黑馬程序員訓練營已成長為行業(yè)學員質量好課程內容深企業(yè)滿意的移動開發(fā)高端訓練基地，并被評為中關村軟件園重點扶持人才企業(yè)。黑馬程序員的學員篩選制度，遠比現(xiàn)在以上的企業(yè)招聘流程更為嚴格。系統(tǒng)的學習可以參考w3c的教程 web概念概述 * JavaWeb： * 使用Java語言開發(fā)基于互聯(lián)網的項目 * 軟件架構： 1. C/S: Client/Server 客戶端/服務...

Snailclimb 2019-04-23 13:29 評論0 收藏0
vertical-align以及利用 vertical-align 實現(xiàn)垂直居中

摘要：在中實現(xiàn)垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現(xiàn)在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。在 css 中實現(xiàn)垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關于它的一些知識點。原文鏈接 1. 適...

lscho 2019-08-30 15:52 評論0 收藏0
vertical-align以及利用 vertical-align 實現(xiàn)垂直居中

摘要：在中實現(xiàn)垂直居中很多時候會用到，不過我一直對的使用糊里糊涂，現(xiàn)在整理一下關于它的一些知識點。將盒子的垂直中心點與父級盒子基線往上一半高度的位置對齊。時位置與設置一致。我們可以將設為來讓元素完全垂直居中。在 css 中實現(xiàn)垂直居中很多時候會用到 vertical-align ，不過我一直對 vertical-align 的使用糊里糊涂，現(xiàn)在整理一下關于它的一些知識點。原文鏈接 1. 適...

madthumb 2019-08-01 16:13 評論0 收藏0