CSS：表格中一列的大小可變

然後，當瀏覽器展開時，第一列可以達到50px。

有沒有CSS解決方案？我真的很想避免使用js來設置這些樣式。

HTML：

<table> 
<tbody> 
<tr> 
    <td>Item 1 expands</td> 
    <td>Item 2</td> 
    <td>Item 3</td> 
    <td>Item 4</td> 
</tr> 
</tbody> 
</table>

CSS：

table { 
    table-layout: fixed; 
} 

td { 
    width: 25px; 
} 

td:nth-child(1) { 
    ?? max-width: 500px; ?? 
    ?? width: 25%; ?? 
}

來源

2013-04-23 Don P

'最小寬度：25px'，'最大寬度：50px'，'寬度：25％' – 2013-04-23 19:07:55

是否有特定桌子本身被限制在100px寬？如果單元格全部被鉗位到25px，那麼默認情況下表格應該寬度爲100px。 – cimmanon 2013-04-23 19:18:32

我重寫了一個設置'width：auto'的樣式，不幸的是我不得不在這個項目的其他人物組件之上構建。也許我應該試試'width：default'？ – 2013-04-23 19:19:42

爲了使柱擴大的順利，而不是捕捉到一個新的寬度與媒體查詢：

table{ 
    max-width: 125px; 
} 
td{ 
    min-width: 25px; 
} 
td:nth-child(1){ 
    width:40%; // Translates to roughly 50px 
}

這將使第一列與可用的擴展窗口空間。

http://jsfiddle.net/RUNcm/

這工作，因爲如果該表在寬度低於125px，在TD踢的min-width並保持第一個孩子從去下面25px。另一方面，如果表格的寬度大於100px（因爲用戶擴大了瀏覽器窗口），則40%的寬度將允許它達到52px，但不再進一步。（這就是max-width 125px;有助於緩和）。

註上nth-child：作爲周杰倫娜說，nth-child有瀏覽器的支持比first-child少。您可能需要考慮使用first-child僞類。

MDN文檔

nth-childhttps://developer.mozilla.org/en-US/docs/CSS/:nth-child

first-childhttps://developer.mozilla.org/en-US/docs/CSS/:first-child

來源

2013-04-23 19:29:27

但是當有曾經改變大小？它總是會保持52px在這個方法中 – 2013-04-23 19:31:37

所以你沒有設置現在桌子的大小？我認爲你應該嘗試這個小提琴:) – 2013-04-23 19:33:49

對不起，那tr CSS沒有必要。 http://jsfiddle.net/RUNcm/ – 2013-04-23 19:34:18

-2

你會做這樣的：

@media all and (min-width:400px) { /* or whatever the threshold size is */ 
    td:first-child {width:50px} 
}

來源

2013-04-23 19:06:35

-1

與25px的你想要固定TD元素設置一個。從這一點開始，表格的寬度將定義第一列的寬度，所以您可以定義這一點，但這是有道理的。

編輯例如：

table { 
    max-width:575px; 
} 
td { 
    width: 25px; 
} 

td:nth-child(1) { 
width:auto; 
}

來源

2013-04-23 19:08:24

我測試了這個，它不起作用:(第一列保持摺疊，並基於它的內容進行擴展 – 2013-04-23 19:50:44

CSS：表格中一列的大小可變

回答

相關問題