`white-space:nowrap`影响宽度

Question

我有一个文件上传器的表.文件名可能很长,因此只有名称的一部分显示在以下帮助下:

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

那是因为自动表布局,

格式化的内容可以跨越任意数量的行但可以不溢出单元格框.

因此,您可以通过使用固定表格布局来解决此问题.将以下样式添加到表格框中:

table-layout: fixed;

问题是,你的表格布局全乱了,与display: block和float: left风格.所以你的table-cells被包装在一个匿名表中,你无法选择.

要么不弄乱表,要么添加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>