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

資訊專欄INFORMATION COLUMN

table寬度

jone5679 / 3307人閱讀

摘要：題目雖然是說的寬度，但其實最讓人抓狂的是單元格的寬度。表格的寬度有決定，列的寬度有首行單元格的決定。如果單元格的值為，則最小單元格寬度為為最小內(nèi)容寬度。最大列寬必須等于這個單元格的最大單元格寬度。

題目雖然是說table的寬度，但其實最讓人抓狂的是單元格td的寬度。平時開發(fā)中也經(jīng)常會遇到這方面的問題，所以我找資料學習table的寬度的算法。

table-layout

table-layout定義了表格布局算法，值為auto或fixed。

fixed

采用固定表格布局算法對表格布局。表格的寬度有width決定，列的寬度有首行單元格的width決定。
先上一個demo。
分析一下，這里table計算寬度為200px，第一列的計算寬度為100px，第二列計算寬度為20px，第三列和第四列的計算寬度為33px。第三列和第四列的寬度是由table
寬度減第一列和第二列寬度之和以及單元格左右border寬度，再除以2得到。也許你會問，為什么“1-3”所在td不是定義了width嗎？為什么第三列是計算得到的？答：因為定義了width的td不位于首行，th才是位于首行。

規(guī)則

如果設(shè)置了列元素（col），列元素的width被設(shè)置為列的寬度。demo

列元素的width為auto，或者沒有設(shè)置列元素（如第一個demo），首行單元格的width將被設(shè)置為所在列的寬度。

如果不符合以上兩種情況，則由瀏覽器計算確定。

auto（默認值）

采用自動表格布局算法對表格布局。表格及單元格的寬度取決于其包含的內(nèi)容（還是可以為單元格設(shè)置width的）。

規(guī)則

計算最小單元格寬度

1.1 計算每個單元格的最小內(nèi)容寬度：內(nèi)容可以流入多行，但不能超出單元格。
1.2 如果單元格的width值大于最小可能寬度，則最小單元格寬度為單元格的width值。
1.3 如果單元格的width值為auto，則最小單元格寬度為為最小內(nèi)容寬度。

計算最大單元格寬度：完全顯示內(nèi)容且不換行（不考慮顯示換行）時所需的寬度

計算最小列寬：該列中所有單元格的最小單元格寬度的最大值

計算最大列寬：該列中所有單元格的最大單元格寬度的最大值

如果單元格跨列，最小列寬之和必須等于這個跨列單元格的最小單元格寬度。最大列寬必須等于這個單元格的最大單元格寬度。

demo

其他

但table的width為auto時，即使table-layout為fixed，都會采用自動布局算法。demo

參考

W3C CSS2.1中文文檔

MDN

CSS權(quán)威指南

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

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

相關(guān)文章

  • table寬度

    摘要：題目雖然是說的寬度，但其實最讓人抓狂的是單元格的寬度。表格的寬度有決定，列的寬度有首行單元格的決定。如果單元格的值為，則最小單元格寬度為為最小內(nèi)容寬度。最大列寬必須等于這個單元格的最大單元格寬度。 題目雖然是說table的寬度，但其實最讓人抓狂的是單元格td的寬度。平時開發(fā)中也經(jīng)常會遇到這方面的問題，所以我找資料學習table的寬度的算法。 table-layout table-lay...

    GHOST_349178 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    lijinke666 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    hedge_hog 評論0 收藏0

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

    kun_jian 評論0 收藏0

  • css頁面布局技巧

    摘要：一居中布局居中布局水平居中寬度自適應(yīng)變成行內(nèi)塊元素，讓元素寬度自適應(yīng)，不繼承父元素寬度變成元素，可以讓元素寬度自適應(yīng)，不繼承父元素寬度定位，可以讓元素寬度自適應(yīng)，不繼承父元素寬度或者垂直居中高度自適應(yīng)變成類似元素定位， 一、居中布局 居中布局 水平居中（寬度自適應(yīng)） 1.inline-block + text-align .child{ display:inline...

    劉明 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<