44

这个问题已经被问过好几次了，但所提供的答案似乎都对我没有帮助：

在此处查看此操作：http: //jsfiddle.net/BlaM/bsQNj/2/

我有一个包含两列的“动态”（基于百分比）布局。

.grid {
    width: 100%;
    box-sizing: border-box;
}
.grid > * {
    box-sizing: border-box;
    margin: 0;
}
.grid .col50 {
    padding: 0 1.5%;
    float: left;
    width: 50%;
}

在这些列中的每一列中，我都有一个应该使用完整列宽的表。

.data-table {
    width: 100%;
}
.data-table td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

我的问题是该表中的某些列的内容需要被截断以适合表的给定宽度。但是，这不会发生。我得到两个相互重叠的表。

要求：

  • 需要基于百分比。我无法设置绝对尺寸。
  • 每行的高度不得超过一个文本行（如果我删除空格会发生这种情况：nowrap）
  • 必须在 Chrome、Firefox 和 Internet Explorer 8+ 中工作
  • 无法在彼此下方显示表格，因为打印时它必须适合一张纸。

我尝试了什么：

  • 在里面并使用宽度和溢出。什么都没改变。
  • “显示：表格；” 关于包含 div - 表格不是有两列，而是显示在彼此下方
  • “表格布局：固定；” - 强制所有列具有相同的宽度
  • 我知道第 2+3 列总共有 30% 的宽度，所以我尝试手动将第 1 列设置为 70% - 没有改变任何东西
  • 内容中的零宽度空格- 没有改变任何东西，可能是由于 white-space: nowrap;

相关问题：

4

5 回答 5

74

您需要添加 table-layout 属性：

table-layout: fixed;

还要在表格 HTML 标记中包含 width=100%，而不仅仅是样式标记。

http://jsfiddle.net/reeK5/

于 2014-04-15T00:57:15.623 回答
7

也许你会对max-width: 0;我发现的一个 hack 感兴趣。

它有一些限制，我们应该使用 CSS 表格而不是 HTML，但它有效：

.leftBlock
{
    width: 100%;
    max-width: 0;
    word-wrap: break-word;
    overflow: hidden;
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

http://jsfiddle.net/Cyber​​AP/NUHTk/103/

于 2014-04-15T11:31:17.290 回答
3 

.div {
  width:300px;
  border:1px solid;
}
.breaked {
  word-break: break-all;
}
table{
  border:1px solid red;
}
td {
  border:1px solid green;
}
<div class="div">
<table>
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
  <br /><hr/><br />
  <table class="breaked">
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
</div>

于 2016-11-15T10:07:29.313 回答
2

桌子上的测量工作方式不同。通常，表格单元格的宽度被处理为最小宽度。

如果您不介意添加额外的标记，一种解决方案是div在您放置内容的每个表格单元格中放置一个。然后给这个 div 一个宽度，或者一个最大宽度。所以

<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>

变成

<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>

等等。

请参阅更新的小提琴：http: //jsfiddle.net/bsQNj/4/

编辑：我看到小提琴需要一些工作 - 我忘记在必要的地方放置一些 div。但我希望你能接受这个想法。

于 2013-07-31T12:24:57.837 回答
-4

在您的 CSS 中：

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

这应该涵盖所有表格

于 2014-07-03T01:05:08.593 回答