CODEWITHSUNDEEP
htmlcsstwitter-bootstraphtml-tablewidth
Mese
Mese

Reputation: 887

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>

Upvotes: 1

Views: 4227

Answers (3)

pictoru
pictoru

Reputation: 752

Add white-space: nowrap; css rule on buttons cell. Should work.

Upvotes: 1

kukkuz
kukkuz

Reputation: 42352

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>

Upvotes: 1

Petr
Petr

Reputation: 111

Try this one:

td:last-child {
  white-space: nowrap;
}

..it says the last columns won't be wrapped.

Upvotes: 1

Related Questions