Equal width columns in long bootstrap table

Question

In the above table to achieve equal width columns I have used <td class="col-md-1"></td>. But only the first few columns are equal width as shown in the image. As this is a long table I would like to scroll horizontally so that the table can maintain the required column width. but this table wouldn't grow. I even tried table{ width:auto !important }

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

The above styles get applied for my table from bootstrap

Classes I have used in the table element - <table class="table table-bordered"></table> Framework: Bootstrap 3

meldev · Accepted Answer · 2017-12-17 16:23:13Z

2

You will want to use this markup:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Source: Responsive Table Bootstrap

answered Dec 17, 2017 at 16:23

meldev

3993 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GibboK · Accepted Answer · 2017-12-17 20:46:28Z

Try to use <th> instead.

Example of table in bootstramp.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
      <table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">
          <caption class="text-center">An example of a responsive table based on <a href="https://getbootstrap.com/css/#tables-responsive" target="_blank">Bootstrap</a>:</caption>
          <thead>
            <tr>
              <th>Country</th>
              <th>Languages</th>
              <th>Population</th>
              <th>Median Age</th>
              <th>Area (Km²)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Argentina</td>
              <td>Spanish (official), English, Italian, German, French</td>
              <td>41,803,125</td>
              <td>31.3</td>
              <td>2,780,387</td>
            </tr>
            <tr>
              <td>Australia</td>
              <td>English 79%, native and other languages</td>
              <td>23,630,169</td>
              <td>37.3</td>
              <td>7,739,983</td>
            </tr>
            <tr>
              <td>Greece</td>
              <td>Greek 99% (official), English, French</td>
              <td>11,128,404</td>
              <td>43.2</td>
              <td>131,956</td>
            </tr>
            <tr>
              <td>Luxembourg</td>
              <td>Luxermbourgish (national) French, German (both administrative)</td>
              <td>536,761</td>
              <td>39.1</td>
              <td>2,586</td>
            </tr>
            <tr>
              <td>Russia</td>
              <td>Russian, others</td>
              <td>142,467,651</td>
              <td>38.4</td>
              <td>17,076,310</td>
            </tr>
            <tr>
              <td>Sweden</td>
              <td>Swedish, small Sami- and Finnish-speaking minorities</td>
              <td>9,631,261</td>
              <td>41.1</td>
              <td>449,954</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="5" class="text-center">Data retrieved from <a href="http://www.infoplease.com/ipa/A0855611.html" target="_blank">infoplease</a> and <a href="http://www.worldometers.info/world-population/population-by-country/" target="_blank">worldometers</a>.</td>
            </tr>
          </tfoot>
        </table>

Collectives™ on Stack Overflow

Equal width columns in long bootstrap table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related