響應行的圖像和文字

Question

我已經排列了每行下面的文本的五個圖像，我試圖使它響應。問題是所有圖像都不能正確縮小。我希望他們都有相同的寬度&高度。

---

我迄今爲止代碼：

<table> 
    <tr> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>testing text</p> 
     </td> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>Longerishhh texting text</p> 
     </td> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>Text</p> 
     </td> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>Quite long text</p> 
     </td> 
     <td> 
      <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" /> 
      <p>More testing</p> 
     </td> 
    </tr> 
</table> 

CSS：

html{ 
    width: 100%; 
} 

table{ 
    width: 80%; 
} 

td{ 
    display: table-cell; 
    width: 20%; 
    text-align: center; 
    overflow: hidden; 
    vertical-align: baseline; 
} 

img{ 
    width: 100%;  
} 

jsfiddle

Answer 1

添加以下表中的CSS：

table-layout: fixed; 

你的情況：

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

更新這裏的jsfiddle - http://jsfiddle.net/Y7CrV/7/

Answer 2

html{ 
    width: 100%; 
} 

table{ 
    width: 80%; 
} 
tr{width:100%;} 
td{ 
    display: table-cell; 
    width: 20%; 
    text-align: center; 
    overflow: hidden; 
    vertical-align: baseline; 
word-break: break-all; 
} 

img{ 
    width: 100%;  
} 

Answer 3

爲什麼不使用浮動的div？

div.row { 
    width: 80%; 
} 

/* clearfix */ 
div.row { zoom:1; } 
div.row:before, div.row:after { content:""; display:table; } 
div.row:after { clear:both; } 

div.row .column { 
    width: 20%; 
    float: left; 
    text-align: center; 
    overflow: hidden; 
} 

參見：http://jsfiddle.net/Y7CrV/8/

但是，如果你想要更多的靈活性，你可能想看看http://foundation.zurb.com/grid.php