Question

我的页面上有一个gridview表，它正在扩展超出页面宽度，即使我有max-width：100％设置在几个地方。这是我对表的自定义css（它位于.gridTable类中）：

gridTable{
   border-top: 1px solid #dddddd;
   border-collapse: collapse;
   border-spacing: 0; 
   float:left;
   table-layout: fixed;
   max-width: 100% !important;                       
}

有一列有很长的数据，导致表格太宽。我试图通过隐藏溢出来限制它：

div.gridTable tbody > tr > td:nth-last-child(2) {
   max-width:100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

然而，即使有了这一切，当我在该列中有长数据时，我的表仍然会超出页面宽度。当我检查元素时，我可以看到它具有所有max-width：100％样式限制，甚至一些继承自表类的bootstrap.css文件，但由于某种原因它们不做任何事情;它只需扩展所需的内容并添加滚动条。

如果我将一个问题列的宽度设置为固定的像素数，一切都有效，但显然我不想这样做，因为它应该是不同的大小，具体取决于屏幕的大小。

编辑：这不是与this question相同的问题，因为该问题的解决方案是添加word-break：break-word以便将这些行分解为正确的大小。然而，这导致他们换行到另一条线，我不想要任何包装，我想隐藏溢出。当我包含代码来隐藏溢出时，正如我目前所做的那样，word-break：break-word代码不会改变任何内容。

编辑2：我从DataTable dt定义我的表，并在后面的代码中绑定数据：

GridView1.DataSource = dt;
GridView1.DataBind();

这是html：

<div class="gridTable">
  <asp:GridView runat="server" ID="GridView1" >
</asp:GridView></div>

Answer 1

这是我在Chrome，Firefox，Edge，IE11中测试过的一个技巧，并取得了成功。

删除table-layout: fixed然后将宽度设置为1px，使第一列的大小变为其内容。

将div添加到第二列，使其宽度为1px，将使其溢出可见，并且这似乎不会将列推到表的宽度之外。

Fiddle demo

.gridTable {
  border-collapse: collapse;
  width: 80%;
}
.gridTable td {
  border: red solid 1px;
  white-space: nowrap;
  overflow: hidden;
}
.gridTable td:first-child {
  width: 1px;
}
.gridTable div {
  max-width: 1px;
}

<table class="gridTable">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td><div>
      Col 2a Col 2a Col 2a Col 2a Col 2a 
      Col 2b Col 2b Col 2b Col 2b Col 2b 
      Col 2c Col 2c Col 2c Col 2c Col 2c 
      </div>
    </td>
  </tr>
</table>

Answer 2

我认为这可以帮到你：

td {
   word-break: break-word;
}

这就是我在td中有一个很长的网址时所做的事情，并且网址没有破坏，并强制表格扩展到页面宽度之外。

这是指向question的链接。

Answer 3

我建议你在第一行添加每个td的宽度。它们的宽度总和应该是100％。如果你有3个相等的列，那么每个列的宽度为33.33％，如果4 =则为25％，如果它们不等于计算它们的正确百分比。

<强> demo

另外为表格指定100％宽度并为溢出：隐藏tds以隐藏大内容。

.gridTable{ width:100%}
.gridTable td {overflow:hidden;}

最大宽度：100％不起作用

3 个答案: