html - `white-space: nowrap` 影响宽度

Question

我有一个文件 uploader 表。文件名可能很长，因此在以下帮助下仅显示部分名称:

overflow: hidden;
white-space: nowrap;

小名字一切正常(表格在 Bootstraps 面板边框内)，但对于大名字我有这个:

所有 <td>标签在 col-xs-* 的帮助下具有比例，总和 *值为 12。如果我评论 white-space: nowrap;页面看起来像:

我已经检查了盒子的尺寸，只有 <td> 的宽度受到影响，没有填充或边距变化。

这是为什么，我该如何优雅地解决它？提前谢谢你。

.table-fixed tbody {
  height: 200px;
  overflow-y: auto;
  width: 100%;
  float: left;
}
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block;
}
.table-fixed tbody td,
.table-fixed thead > tr> th {
  float: left;
  border-bottom: none;
  max-height: 40px;
  min-height: 40px;
}
.file-name {
  overflow: hidden;
  white-space: nowrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class='col-xs-10 col-xs-offset-1'>
<div class='panel panel-default'>
  <div class='panel-heading'>
    <span class='help-block'><span translate>Upload files by dragging &amp; dropping or selecting them.</span>&nbsp;<a>Browse to select</a>
    </span>
  </div>
  <table class="table table-fixed">
    <tbody>
      <tr ng-repeat='f in files'>
        <td class='col-xs-6 file-name'>Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name </td>
        <td class='col-xs-5'>
          <div class='progress'>
            <div class='progress-bar' role='progressbar' aria-valuemin='0' aria-valuemax='100' style='width:50%'></div>
            <span class="percents">50%</span>
          </div>
        </td>
        <td class='col-xs-1'>
          <a href>X</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Answer 1

那是因为 automatic table layout ,

the formatted content may span any number of lines but may not overflow the cell box.

所以您可以通过使用固定表格布局来解决这个问题。在表格框中添加以下样式:

table-layout: fixed;

问题是您的表格布局一团糟，有 display: block 和 float: left 样式。因此，您的 table-cell 被包裹在一个您无法选择的匿名表格中。

要么不要弄乱表格，要么添加一个 display: table 包装器。

.table-fixed tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table-fixed tbody {
  height: 200px;
  overflow-y: auto;
  width: 100%;
  float: left;
}
.table-fixed tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.table-fixed thead,
.table-fixed tbody,
/*.table-fixed tr,*/
.table-fixed td,
.table-fixed th {
  display: block;
}
.table-fixed tbody td,
.table-fixed thead > tr> th {
  float: left;
  border-bottom: none;
  max-height: 40px;
  min-height: 40px;
}
.file-name {
  overflow: hidden;
  white-space: nowrap;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class='panel panel-default'>
  <div class='panel-heading'>
    <input type='button' class='btn btn-danger' value='Abort'></input>
    <span class='help-block'><span translate>Upload files by dragging &amp; dropping or selecting them.</span>&nbsp;<a>Browse to select</a>
    </span>
  </div>
  <table class="table table-fixed">
    <tbody>
      <tr ng-repeat='f in files'>
        <td class='col-xs-6 file-name'>Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name Long name </td>
        <td class='col-xs-5'>
          <div class='progress'>
            <div class='progress-bar' role='progressbar' aria-valuemin='0' aria-valuemax='100' style='width:50%'></div>
            <span class="percents">50%</span>
          </div>
        </td>
        <td class='col-xs-1'>
          <a href>
            <fa name="trash" alt="delete" style="color: #FF4136"></fa>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>