爲什麼CSS td寬度不起作用？

請參閱本JSFIDDLE 爲什麼CSS td寬度不起作用？

td.rhead { width: 300px; }

爲什麼沒有CSS寬度工作？

<table> 
<thead> 
<tr> 
<td class="rhead">need 300px</td> 
<td colspan="7">Week #0</td> 
<td colspan="7">Week #1</td> 
<!-- etc..--> 
</tr> 
<tr> 
<td class="rhead"></td> 
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td> 
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td> 
<!-- etc... --> 
</tr> 
<thead> 
</table>

此外，位置的影響：固定，絕對等對td寬度有什麼影響？我正在尋找一個不僅僅是修復的原因。我希望瞭解它是如何工作的。

td width is not 300px as desired

來源

2013-02-08 Jake

'display：table-cell'不尊重'width'（就像它不適用於'display：inline'一樣）。我不明白你在詢問'position fixed | absolute' –

@ExplosionPills，因爲在我的實際代碼中，我將表設置爲固定的。正如你所猜測的，我試圖在頁面頂部實現一個時間線。所以我只是說明case position屬性會影響寬度。 – Jake

[CSS table td width - fixed，not flexible]可能的重複（http://stackoverflow.com/questions/6658947/css-table-td-width-fixed-not-flexible） –

123

這可能不是您想要聽到的，但是display: table-cell不考慮寬度，並且將根據整個表的寬度摺疊。你可以解決這個問題很容易單單是表格單元本身的寬度可以指定內部的display: block元素，如

<td><div style="width: 300px;">wide</div></td>

這應該沒有太大的差別，如果<table>本身position: fixed或絕對的，因爲單元格的位置相對於表格都是靜態的。

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

編輯：我不能居功，但隨着評論說，你可以只使用min-width，而不是width在表格單元格來代替。

來源

2013-02-08 04:58:14

+22

+1 - 我以前使用過這種解決方法。奇怪的是，'TD'上的'min-width'確實在Chrome和FF中可以正常工作：http://jsfiddle.net/Mkq8L/7/ –

實際上，在發佈問題後，我發現「min寬度：300px'的作品！（@TimMedora你幾秒更快！） – Jake

我認爲最好的答案是提到顯示：表格單元格行爲。謝謝！ – Jake

試試這個工作。

<table> 
<thead> 
<tr> 
<td width="300">need 300px</td>

來源

2013-02-08 04:46:46

WOW！謝謝♥ – ivahidmontazer

請添加一些解釋爲什麼/這個代碼如何幫助OP。這將有助於提供未來觀衆可以從中學習的答案。請參閱[這個元問題及其答案]（http://meta.stackoverflow.com/q/256359/215552）瞭解更多信息。 –

請注意，在HTML5中不推薦使用width屬性。 – simhumileco

它不能在您提供的鏈接中工作的原因是因爲您試圖顯示一個300px的列PLUS 52列各跨度7列。收縮列的數量，它的作品。你不能在屏幕上放置那麼多。

如果要強制列，使其符合嘗試設置：

body {min-width:4150px;}

看到我的jsfiddle：http://jsfiddle.net/Mkq8L/6/ @mike我不能評論。

來源

2013-02-08 04:46:48

+1用於發現表格寬度閾值隨着身體寬度的增加而增加。 – Jake

您還可以使用：

.rhead { 
    width:300px; 
}

但這隻會與一些瀏覽器，如果我沒有記錯IE8不允許這樣。總而言之，將width=""屬性放在<td>本身中是比較安全的。

來源

2013-02-08 04:53:40 michaelcurry

原因是，因爲你沒有指定表的寬度，並且你的整個td都溢出了。

This for example，我已經給出了表格寬度爲5000px，我認爲這將適合您的要求。

table{ 
    width:5000px; 
}

它與您提供的完全相同的代碼，我只是在表格寬度中添加的。

我相信發生了什麼，是因爲你的TD的方式超過了默認的表格寬度。你可以看到，如果你在每個tr中抽出約45個td，你在你的問題中提供的代碼，而不是的jsfiddle）它的工作原理完全罰款

來源

2013-02-08 05:03:16

+1提到有一個表寬度閾值。問題有時候我們並不知道前面的整體寬度。什麼是默認表格寬度？ – Jake

我其實不知道。我所知道的是，如果列數過多，表格會壓縮，導致所有子節點寬度無效。我之前遇到過這個問題，但我還沒有找到默認值，也許我應該問這個問題。 –

我相信我解決了這個問題http://stackoverflow.com/questions/14767459/does-html -table-tag-have-a-default-width/14857179＃14857179 –

我瘋了解決方案。）

$(document).ready(function() { 
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>"; 
    $(this).html(htmlText); 
    }); 
});

來源

2014-02-18 13:39:13 mathewsun

嘗試使用

table { 
    table-layout: auto; 
}

如果使用引導程序，類table由具有默認。

來源

2014-08-14 17:52:44 sambrmg

你最好不要使用table-layout: fixed

自動是默認值，並與大表可能造成一些客戶端滯後通過其瀏覽器遍歷檢查所有大小適合。

固定是好得多，呈現更快的頁面。表的結構取決於表的總寬度和每列的寬度。

這裏將其應用於原始示例：JSFIDDLE，您會注意到其餘列被壓縮並重疊其內容。我們可以解決這個問題有一些更多的CSS（所有我不得不做的是一個類添加到第一TR）：

table { 
     width: 100%; 
     table-layout: fixed; 
    } 

    .header-row > td { 
     width: 100px; 
    } 

    td.rhead { 
     width: 300px 
    }

看到了正在這裏：JSFIDDLE

來源

2014-09-17 09:33:34

如果表格的寬度是例如100 ％，請嘗試在td上使用百分比寬度，例如20％。

來源

2016-10-07 09:30:18

在表格中使用表格佈局屬性和「固定」值。

table { 
    table-layout: fixed; 
    width: 300px; /* your desired width */ 
}

在設置了表格的整個寬度後，您現在可以設置td的百分比寬度。

td:nth-child(1), td:nth-child(2) { 
    width: 15%; 
}

您可以瞭解更多關於此鏈接：http://www.w3schools.com/cssref/pr_tab_table-layout.asp

來源

2016-12-28 05:52:30

來自第一小區

包裹內容DIV例如這樣的：

HTML：

<td><div class="rhead">a little space</div></td>

CSS：

.rhead { 
    width: 300px; 
}

這裏是一個jsfiddle。

來源

2017-04-05 12:17:49 simhumileco

爲什麼CSS td寬度不起作用？

回答

相關問題