css控制table表格寬度的小技巧教程

對table表格寬度定義有直接table標籤內使用width寬度屬性定義其寬度，另外也可以通過css樣式設定定義其寬度，根據需要可選擇自己適用的定義寬度方法。

一、html table標籤內寬度定義

我們直接在table標籤內加入width寬度屬性即可定義寬度如下：

<table width="300">

這樣定義table寬度為300px，記住這個寬度的值不需要帶html長度單位，預設以像素px為單位。

二、css定義table寬度

Css定義table寬度的css代碼如下：

table{width:300px}

這樣就通過css定義該網頁中table表格寬度都為300px,當然這樣不太好，如果一個網頁中多處使用了table表格版面配置這樣定義表格寬度自然不合適。

因此我們需要建立css命名一個類，這裡命名為".divcss5"，css樣式如下：

table.divcss5{width:300px}

或者

.divcss5{width:300px}

對應table標籤應用：

<table class="divcss5"></table>

這樣只有加入“divcss5”類的table表格的表格寬度才為300px,這樣就區別了如果一個網頁中多處出現使用table表格情況。

三、總結

定義寬度屬性，無論是div、span還是table，我們都可以使用以上css定義寬度方法。

css控制td寬度

通常對td設定寬度，一般是對多組標籤裡某一組設定寬度，或者設定多對裡的每個td標籤都設定不同的寬度，那我們就需要對td加一個class或id選取器(如何選擇class和id)有多個不同我們就做建立幾個class或id，以便區別與其它同級td標籤。

執行個體如下：

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

假如table總寬度為300，而這3對寬度方便為100px,150px,200px，這個時候我們就需要建立命名三個不同class選取器，CSS代碼如下：

.divcss5-td-1{width:100px}
.divcss5-td-2{width:150px}
.divcss5-td-3{width:200px}

對應html原始碼如下：

<table>
    <tr>
        <td class="divcss5-td-1">寬度為100px</td>
        <td class="divcss5-td-1">我寬度為150px</td>
        <td class="divcss5-td-1">我寬度為200px</td>
    </tr>
</table>

寬度為100px我寬度為150px我寬度為200px

效果截圖：

 

 

使用css 對td寬度設定案例截圖

以上使用css設定td寬度方法與案例，希望對你有協助。

擴充瞭解，直接對html td標籤設定寬度，我們直接td標籤加入width寬度屬性即可，html原始碼如下：

<table>
    <tr>
        <td width="100">寬度為100px</td>
        <td width="150">我寬度為150px</td>
        <td width="200">我寬度為200px</td>
    </tr>
</table>

寬度為100px我寬度為150px我寬度為200px

效果截圖

 

 

直接td標籤內設定寬度截圖

直接td標籤設定寬度與值

注意是，直接在td標籤內設定width寬度屬性其值是不需要加網頁長度單位的。

以上是使用css設定td寬度與html td標籤直接設定寬度方法，希望能掌握並靈活使用，有時候使用css td寬度有時候td標籤直接加入width，這需要根據需求選擇。