html – 如何制作固定大小的表格单元格而不管其内容

概述我有一个包含动态内容的表,所以每行的高度是变化的 – 我想要的是固定表的高度而不管内容.内容可以是任何长度,也可以有图像. 我在CSS中尝试了以下内容： table { border-collapse: collapse;}table td { border: 1px solid #ccc; padding: 4px;}table td:nth-child(2n+2) { 我有一个包含动态内容的表,所以每行的高度是变化的 – 我想要的是固定表的高度而不管内容.内容可以是任何长度,也可以有图像.

我在CSS中尝试了以下内容：

table {  border-collapse: collapse;}table td {  border: 1px solID #ccc;  padding: 4px;}table td:nth-child(2n+2) {  wIDth: 200px;}table td:last-child {  wIDth: 100px;}table tr {  height: 80px;  display: block;  overflow: auto;  background-color: red;  border: 2px solID #ccc;}<table>  <tr>    <td>content1</td>    <td>content 2</td>    <td>content 3</td>  </tr>  <tr>    <td>content1</td>    <td>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</td>    <td></td>  </tr>  <tr>    <td>content1</td>    <td></td>    <td>content 3</td>  </tr></table>

它工作正常,但当任何单元格中没有内容,或者内容减少了单元格时,它就会崩溃.这是fiddle

解决方法 你可以使用像( example)这样的东西：

table td{    wIDth: 60px;    height: 60px;    display: inline-block;    overflow: auto;}​

使用支持内联块的浏览器. (虽然我不确定这是否是一个很好的解决方案.)

总结

以上是内存溢出为你收集整理的html – 如何制作固定大小的表格单元格而不管其内容全部内容，希望文章能够帮你解决html – 如何制作固定大小的表格单元格而不管其内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。