Mese Mese - 14 days ago 7
CSS Question

Make table td not overlap

I'm trying to make a bootstrap table which displays a few data rows, one of them including two buttons.

The problem is that when the screen resizes to smaller sizes the buttons get on top of each other and I want to have each TD of the table in a single row, having overflow or whatever it needs.

I've searched but non of the answers helped me in any way. I don't know if I'm missing something pretty obvious (probably is the case) or it's a bit more complex that I believe.

Here's a replica of my table: http://codepen.io/TheMese/pen/vymEQZ?editors=1100

Here's just the table:

<table class="table table-hover table-striped">
<thead>
<tr>
<th>Uid</th>
<th>Name</th>
<th>Description</th>
<th>High Available</th>
<th>Strict Mode</th>
<th>Shared</th>
<th>Nodes Assigned</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>123123</td>
<td>Node Pool Name</td>
<td>Node Pool Description</td>
<td>Node Pool High Availability</td>
<td>Node Pool Strict Mode </td>
<td>Node Pool Shared</td>
<td>Node Pool ASsigned</td>
<td>
<button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
</tr>
</tbody>
</table>


Thanks in advance.

Answer

Add white-space: nowrap for the td in question - see

Updated codepen

and snippet below:

table > tbody > tr > td:last-child {
  white-space: nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        Node Pool List
      </div>
      <div class="table-responsive">
        <div class="panel-body">
          <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th>Uid</th>
                <th>Name</th>
                <th>Description</th>
                <th>High Available</th>
                <th>Strict Mode</th>
                <th>Shared</th>
                <th>Nodes Assigned</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>123123</td>
                <td>Node Pool Name</td>
                <td>Node Pool Description</td>
                <td>Node Pool High Availability</td>
                <td>Node Pool Strict Mode </td>
                <td>Node Pool Shared</td>
                <td>Node Pool ASsigned</td>
                <td>
                  <button class="btn btn-default"><span class="glyphicon glyphicon-pencil"></span></button>
                  <button class="btn btn-default"><span class="glyphicon glyphicon-trash"></span></button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>