<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回頭來看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1">神舟 優雅Q400N</td>
<td class="col2">優雅Q400N，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td>
<td class="col3">迅馳4平臺，突出的性價比，漂亮的外觀</td>
</tr>
</table>
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回頭來看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1">神舟 優雅Q400N</td>
<td class="col2">優雅Q400N，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td>
<td class="col3">迅馳4平臺，突出的性價比，漂亮的外觀</td>
</tr>
</table>
運行如上代碼，你會發現單元格里超過固定寬度的文字不會被隱藏掉，而是換行顯示了，顯然，這並不是我的本意。
看起來，這似乎是table的一個特性，它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的組合，說到底就是white-space:nowrap這個東東沒起作用，所以看起來overflow:hidden就失效了。{注：如果是一連串的無意義字符則可生效，例如：<td class="col1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>，這個時候就不需要{white-space:nowrap}來強制它在一行內顯示，因爲這一連串的a會被認定爲是一個字而不發生換行，從而超出.col1寬度的a會被隱藏}
［解決方案一：］
後來有人提到使用百分比寬度就可以了，經測試，確實可以，稍微將第一段的其中幾行樣式修改一下，其它的不變：
.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}
.col2 {width:40%;}
.col3 {width:40%;}
將修改後的代碼運行後，會發現，超出寬度的文字果然被隱藏了，想要的效果似乎得到了。
事實上使用百分比寬度確實可以解決這個文字隱藏的問題，但這似乎並不是想要的最佳的解決方案，因爲有的時候我們需要的是一個固定的寬度，而不是百分比寬度。
而這一切的根源就在於如何使得單元格內的文字不換行在一行內顯示。
［解決方案二：］
要達到這個要求，除了使用樣式，我們也許還會想到一個許久不用了的標籤<nobr>，這個元素的作用就是強制內容在一行顯示。以上代碼做如下修改，其它則不變：
<table border="1" cellspacing="0" summary="回頭來看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1"><nobr>神舟 優雅Q400N</nobr></td>
<td class="col2"><nobr>優雅Q400N，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</nobr></td>
<td class="col3"><nobr>迅馳4平臺，突出的性價比，漂亮的外觀</nobr></td>
</tr>
</table>
<tr>
<td class="col1"><nobr>神舟 優雅Q400N</nobr></td>
<td class="col2"><nobr>優雅Q400N，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</nobr></td>
<td class="col3"><nobr>迅馳4平臺，突出的性價比，漂亮的外觀</nobr></td>
</tr>
</table>
做了這個修改，會發現，效果確實達到，是不是該興奮呢？不，這似乎還不是最佳的解決方案，因爲畢竟使用了一個許久不用且不推薦使用的元素標記，這多少讓人覺得有點不爽。
沿着這個思路，我換了一個角度來考慮這個問題，發現問題迎刃而解。
既然在固定寬度的單元格內無法只簡單的給th,td加上white-space:nowrap，那麼我們在固定寬度的單元格內再加一個標記元素呢？
最佳方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回頭來看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="測試">
<thead>
<tr>
<th class="col1"><strong>產品名稱</strong></th>
<th class="col2"><strong>產品介紹</strong></th>
<th class="col3"><strong>產品備註</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 優雅Q400N</td>
<td>優雅Q400N，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td>
<td>迅馳4平臺，突出的性價比，漂亮的外觀</td>
</tr>
</tbody>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回頭來看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="測試">
<thead>
<tr>
<th class="col1"><strong>產品名稱</strong></th>
<th class="col2"><strong>產品介紹</strong></th>
<th class="col3"><strong>產品備註</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 優雅Q400N</td>
<td>優雅Q400N，採用Intel Core2 Duo(Merom) T5450(1.66G)處理器</td>
<td>迅馳4平臺，突出的性價比，漂亮的外觀</td>
</tr>
</tbody>
</table>
</body>
</html>
運行上面的代碼，會發現這樣的做法是可以的，而且從代碼的簡潔性、可讀性和合理性幾方面來說，都較前幾種方案爲好。