`white-space: nowrap` affects width

Question

I have a table for the file uploader. File names might be long, so only the part of the name is displayed with the help of:

overflow: hidden;
white-space: nowrap;

Everything works fine for small names (the table is inside the Bootstraps panel borders), but for the big ones I have this:

All the <td> tags have proportions with the help of col-xs-*, total sum of the * values is 12. If I comment the white-space: nowrap; the page looks like:

I have already checked the box sizes, only the width of the <td> is affected, there are no padding or margin changes.

Why is that, and how can I fix it elegantly? Thank you in advance.

.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

That's because with the automatic table layout,

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

So you can solve this by using the fixed table layout instead. Add the following style to the table box:

table-layout: fixed;

The problem is that your table layout is all messed up, with display: block and float: left styles. So your table-cells are wrapped inside an anonymous table, which you can't select.

Either don't mess the table, or add a display: table wrapper.

.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>