Question

我在格式化表格时遇到了一些麻烦！我想制作一张桌子，其中所有单元格都保持相同的宽度和高度。换句话说，他们不会溢出。

我可以通过使用table-layout:fixed来使细胞不会在x轴上溢出，但是我在防止细胞在y轴上溢出时遇到了一些麻烦。我希望隐藏它，但由于某种原因，CSS不与我合作！

我不会详细说明，因为这与我遇到的问题无关，但我没有寻找绝对的解决方案例如具有height:50px风格。我想要一个通用的解决方案来防止这种溢出！

我在下面提供了一些示例CSS和HTML。如果您需要任何说明，请告诉我们！ http://jsfiddle.net/pdtua295/1/

CSS

table.pztable {
  border-collapse:separate;
  table-layout:fixed;
  overflow:hidden;
  margin:0px;
  width:100px;
  height:100px;
}
td.pzcol {
  border:1px dotted #2F2F2F;
  padding: 0px 2px 5px 2px;
  text-align:center;
  vertical-align:middle;
}
span.pztext {
  font-family:Tahoma; 
}

HTML

...

<table class="pztable">
  <tbody>
  <tr>
    <td class="pzcol">
       <span class="pztext">Alice</span>
    </td>
    <td class="pzcol">
       <span class="pztext">Bob</span>
    </td>
  </tr>

  <tr>
    <td class="pzcol">
       <span class="pztext">S<br>T<br>R<br>E<br>T<br>C<br>H</span>
    </td>
    <td class="pzcol">
       <span class="pztext">This won't stretch horizontally.</span>
    </td>
  </tr>
  </tbody>
</table>

...

Answer 1

试试这个自动换行：break-word;

这将打破单词

[I edited your code][1]


  [1]: http://jsfiddle.net/pdtua295/1/

Answer 2

这未经过测试，但在td的CSS中你应该添加高度：50px;白色空间：nowrap;溢出：省略号;应该这样做。

Answer 3

用你的css替换你的css 给表格td提供最小宽度和最大宽度，如

`table.pztable{
border-collapse:separate;
table-layout:fixed;
overflow:hidden;
margin:0px;
}
td.pzcol{
border:1px dotted #2F2F2F;
padding: 0px 2px 5px 2px;
text-align:center;
min-width:150px;
max-width:150px;
}`

CSS表格格式问题

CSS

HTML

3 个答案: