強制固定表格寬度

如何強制固定dreamweaver網頁表格寬度?前端

通常在製做網頁的時候,會往表格的單元格中插入一些文字,但若是插入的文字比較長,則會促使整個表格變得很寬,極其不美觀,甚至會影響整個網頁的佈局。 並且在有一些時候,會由於一些須要只用到一個多大的表格。這時候就要用到強制固定表格大上這個標籤。 可是通常狀況下,即使是你設置了表格的寬度爲某個像素,例如:100px,也不能阻止表格因其單元格文字的過長而變寬。 那麼必須採起CSS樣式的方式來控制。其實也很簡單,只要在表格的屬性中,加入如下代碼: style="table-layout:fixed;word-break: break-all; word-wrap: break-word;" 便可。 完整的寫法例如: <table width="100px" style="table-layout:fixed;word-break: break-all; word-wrap: break-word;" > <tr><td>asdfghjkl;qwertyuiopzxcvbnm,</td></tr>算法

<table/>後端

另外:若是你是在Dreamweaver的「設計」視圖中製做網頁,那但是看不出表格固定寬度的效果的,由於文字會自動換行。
所以必需要保存頁面以後,預覽才能觀察獲得。

CSS教程:表格不被撐開的解決辦法 作一個用戶留言列表的時候,用到了表格。用戶名爲英文字符時,就會把固定寬度的單元格撐開。以前也有遇到過。解決辦法:先用noWrap強行佈局

令文字不換行,再用style="table-layout: fixed;; word-break: break-all;;border-collapse: collapse"強制表格不撐開,即達到效果。ui

須要注意的是:用了nowrap的單元格設置的寬度要用百分比,否則仍是會撐開。咱們能夠給表頭的單元格設置寬度。火狐下還要在td裏面嵌套一個div。設計

附:

  nowrap:通常用在td中禁止自動換行

  table-layout:auto | fixed
  auto  : 默認值。默認的自動算法。佈局將基於各單元格的內容。表格在每一單元格內全部內容讀取計算以後纔會顯示出來
  fixed  :  固定佈局的算法。在這種算法中,表格和列的寬度取決於 col
  對象的寬度總和,假如沒有指定,則會取決於第一行每一個單元格的寬度。假如表格沒有指定寬度( width )屬性,則表格被呈遞的默認寬度爲

100% 。code

word-break:break-all和word-wrap:break-word都是能使其容器如DIV、TD的內容自動換行。
  word-break : normal | break-all | keep-all
  word-wrap : normal | break-word
  它們的區別就在於:

  1,word-break:break-all
  例如div寬200px,它的內容就會到200px自動換行,若是該行末端有個英文單詞很長(congratulation等),它會把單詞截斷,變成該行末端爲

conra(congratulation的前端部分),下一行爲tulation(conguatulation)的後端部分了。orm

2,word-wrap:break-word
  例子與上面同樣,但區別就是它會把congratulation整個單詞當作一個總體,若是該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下

一行,而不會把單詞截斷掉的。對象

border-collapse : separate | collapse
  取值:
  separate  :  默認值。邊框獨立(標準HTML)
  collapse  :  相鄰邊被合併

詳情www.zzarea.com教程

相關文章
相關標籤/搜索