CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
qwertymk
qwertymk

Reputation: 35344

Bootstrap Table Makes width perpotialal to cell content

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<body>
  
  <!-- first table -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Really Lone Name</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Name</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
  
  <!-- second table -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Name1</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Name2</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

As you can see, the first column is taking up way more space then the second one due to the fact that it contains a longer string, even though all the strings can easily fit in an equal width table.

Is there a way to force the columns to be the same width?

Upvotes: 1

Views: 328

Answers (1)

divy3993
divy3993

Reputation: 5810

I think you are looking for this:

Just add table-layout:fixed !important; to the table in your CSS

Snippet

table
{
  table-layout:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<body>
  
  <!-- first table -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Dummy</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Really Lone Name</td>
        <td>25</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Name</td>
        <td>50</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
  
  <!-- second table -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Name1</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Name2</td>
        <td>50</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Updated: Gave one more column to first table.

Note: I know you might be knowing this but still, here i have applied this property directly to table(just for demo), i suggest you to not apply property directly to table, if done would change for all of the tables using same css file. Instead give class to that tables and apply property to that class.

Upvotes: 3

Related Questions