HTML CSS如何阻止表格单元格扩展

Question

我有一个表,其内容来自返回的数据集.我想要做的是阻止'description'单元扩展超过280px宽,无论内容长度是多少(它的字符串).我试过了:

<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" >

但这似乎不起作用.我不希望它包装,也不想要显示超过280px的任何东西.

Answer 1

您的HTML语法似乎对表格单元格不正确.在您尝试下面的其他想法之前,请确认这是否有效...您也可以尝试将此添加到您的表本身:table-layout:fixed ..

<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;">
   [content]
</td>

新的HTML

<td>
   <div class="MyClass"">
       [content]
   </div>
</td>

CSS类:

.MyClass{
   height: 280px; 
   width: 456px; 
   overflow: hidden;
   white-space: nowrap;
}

Answer 2

<table border="1" width="183" style='table-layout:fixed'>
  <col width="67">
  <col width="75">
  <col width="41">
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
  <tr>
    <td>Row 1</td>
    <td>Text</td>
    <td align="right">1</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>Abcdefg</td>
    <td align="right">123</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>Abcdefghijklmnop</td>
    <td align="right">123456</td>
  </tr>
</table>

我知道这是旧学校,但尝试一下,它有效.

可能还想添加这个:

<style>
  td {overflow:hidden;}
</style>

当然,你把它放在一个单独的链接样式表中,而不是内联...不是吗;)

Answer 3

在这里发布 Chris Dutrow 的评论作为答案：

style="table-layout:fixed;" 

桌子本身的风格对我来说很有效。谢谢克里斯！

完整示例：

<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
  <tbody>
    <td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">

     Your table content here

    </td>
  </tbody>
</table>

Answer 4

尝试使用以下 CSS 来停止展开表格及其单元格。

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

th, td {
    word-wrap: break-word;
}

table-layout: fixed会让你的桌子固定下来。但列/单元格仍然会溢出或膨胀。要解决该问题，请使用word-wrap: break-word