Twitter Bootstrap Question posted in

How to change table row width – Twitter bootstrap

I have a HTML responsive table with Bootstrap styles, the problem is that some cell can have a lot of text, as a result of this my cell looks like this:

Header
text…………..
….enf of text
here.

And what I expect is something like this:

(align center)Header
text……………..end of text here.

I tried adding width style to all the “td”, adding “col-md”, but nothing works, here is my table:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div class="container">
  <div class="panel panel-info">
  </div>
  <div class="panel-heading">
    <h4>Table</h4>
  </div>
  <div class="panel-body">
    <div class="col-md-12">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <td>ID</td>
              <td>Revision</td>
              <td>Proposito</td>
              <td>OpenDate</td>
              <td>CloseDate</td>
              <td>Copias</td>
              <td>Status</td>
              <td>Owner</td>
              <td>Model</td>
              <td>VS</td>
              <td>Station</td>
              <td>FollowUp</td>
              <td>FollowUpNumber</td>
              <td><span class="glyphicon glyphicon-cog"></span>
              </td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>00001</td>
              <td>A</td>
              <td>Quality Alert New</td>
              <td>2016-09-21</td>
              <td>2016-10-21</td>
              <td>1</td>
              <td>On approve</td>
              <td>myuser_forRegister</td>
              <td>XXXX-5554-3332-PA</td>
              <td>VS04</td>
              <td>Shippment</td>
              <td>8D</td>
              <td>8</td>
              <td><span class="glyphicon glyphicon-pencil"></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>
      </div>
    </div>

In other words I want to show the table like in the Snippet code, but if you see it in full-page you can see my problem, what can I do?

Tags:

2

Answers


  1. 0

    If you don’t want your text to wrap, you can add a css property of:

    white-space: nowrap;

    You can apply that directly to the td or on a span within the td.

    Just remember that tables are greedy and will overflow their containers if necessary, regardless of whether a width is set or not. Removing text wrapping will raise your chance of that happening.

    Login or Signup to reply.
  2. 0

    Just add the property :

    white-space: nowrap;

    to your table or the cells you want to have dynamic width.

    .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    white-space: nowrap;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search