国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css中關(guān)于table的相關(guān)設(shè)置

kohoh_ / 3192人閱讀

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

一、設(shè)置好看的單邊框表格

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

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

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

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

?

二、給表格設(shè)置居中，及文本居中

　　1、表格整體居中　　　?

table{ 
             margin:auto; 
 }

?

　　2、table文本居中

?　　

td{    
                
    text-align:center;
            
}

三、table的width和height設(shè)置

　　

　　1、table中的width和height設(shè)置及其作用：

　　　　table中設(shè)置的height其實(shí)是設(shè)置個(gè)最小值，也就是當(dāng)表格中的內(nèi)容或者行高總值超過這個(gè)設(shè)置值時(shí)，會(huì)自動(dòng)延長(zhǎng)表格的height值，當(dāng)表格中的內(nèi)容或者行高沒有達(dá)到這個(gè)值時(shí)，會(huì)自動(dòng)擴(kuò)大到這個(gè)值。table中設(shè)置的width值一般為表格寬度的最大值，不能改變，即使內(nèi)部的內(nèi)容寬度超過也不能改變。（這個(gè)內(nèi)部?jī)?nèi)容如果是圖片的話是可以改變表格寬度的。）

?????2、tr標(biāo)簽中width和height設(shè)置及其作用：

　　　　tr標(biāo)簽里面的width設(shè)置不起任何作用，因?yàn)閺牡谝稽c(diǎn)可以看出，表格的width是不能改變的，tr標(biāo)簽當(dāng)然就不起作用了。所以在tr中只有討論height設(shè)置的可能了，tr中的height設(shè)置和幾個(gè)tr之間的設(shè)置有關(guān)。當(dāng)幾個(gè)tr都設(shè)置了height的具體數(shù)值時(shí)，各個(gè)tr的height按照設(shè)置的值的比例來分配總的height值，注意這里說的是總的height值。當(dāng)幾個(gè)tr都沒有設(shè)置height具體值時(shí)，平均分配總的height值。當(dāng)有的tr設(shè)置了具體的數(shù)值，有的沒有設(shè)置具體的數(shù)值為默認(rèn)時(shí)，先保證各個(gè)tr的基本需要，剩下的再滿足設(shè)置了具體值的tr，之后再全部給沒有設(shè)置具體值的tr。最后一種情況還要考慮總的寬度不夠tr總的設(shè)置值的情況，不夠的話要滿足tr的基本需要，這里會(huì)自動(dòng)延長(zhǎng)表格的height的。然后再考慮設(shè)置了heightr的tr，最后考慮沒有設(shè)置height的tr。

?　3、td標(biāo)簽中width和height設(shè)置及其作用：

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

?四、table文本格式設(shè)置

　　

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

?

?

?

?

?

?

?

　　　　

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1238.html

相關(guān)文章

  • 關(guān)于CSS居中問題的一些總結(jié)

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

    Riddler 評(píng)論0 收藏0

  • 關(guān)于CSS居中問題的一些總結(jié)

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

    ISherry 評(píng)論0 收藏0

  • HTML

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

    Snailclimb 評(píng)論0 收藏0

  • vertical-align以及利用 vertical-align 實(shí)現(xiàn)垂直居中

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

    lscho 評(píng)論0 收藏0

  • vertical-align以及利用 vertical-align 實(shí)現(xiàn)垂直居中

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

    madthumb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<