-1

I am trying to use a bootstrap table in my Rails 4 app.

I have:

.intpol3 glyphicon glyphicon-ok {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 15px;
    text-align:center;
    letter-spacing:1.5px;   
    line-height: 1.5;
}
<div class="intpol3">
  <table class="table table-bordered">
    <tr>
      <td></td>
      <td class="warning">Try us</td>
      <td class="success">The basics</td>
      <td class="info">The lot</td>
      <td class="danger">!!!</td>
    </tr>

    <tr>
      <td>1</td>
      <td>$7</td>
      <td>$8</td>
      <td>$9</td>
      <td>$10</td>
    </tr>

    <tr>
      <td>2</td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
    </tr>

    <tr>
      <td>3</td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
    </tr>

    <tr>
      <td>4</td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
    </tr>

    <tr>
      <td>5</td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
      <td><span class="glyphicon glyphicon-ok" </span>
      </td>
    </tr>

    <tr>
      <td>6</td>
      <div class="intpol4">
        <td><span class="glyphicon glyphicon-remove" </span>
        </td>
        <td><span class="glyphicon glyphicon-ok" </span>
        </td>
        <td><span class="glyphicon glyphicon-ok" </span>
        </td>
        <td><span class="glyphicon glyphicon-ok" </span>
        </td>
    </tr>
    </div>

  </table>
</div>

I can't figure out how to:

  1. apply styling of the class="intpol3" to the table elements. I want the font and styling defined in this class to be applied to the table elements, rather than the standard text format being adopted.

    Although it doesn't appear similar to that shown on the get bootstrap website so I'm not sure where that's being imposed.

  2. Make all four columns equal width; they're currently responsive to the amount of text in the cells

  3. Style the glyph icons. I made a CSS div class called:

    .intpol3 glyphicon glyphicon-ok {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 15px;
    text-align:center;
    letter-spacing:1.5px;   
    line-height: 1.5;
}

I want this styling to apply to the icons. However, the 'ok' icon is large and red (not like the standard bootstrap icon). I don't have styling class anywhere else in the app for the ok icon & Im not sure why that styling isn't applying to style the text element that is shown in the last table row (6).

How do you style bootstrap tables to solve these problems?

H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
Mel
  • 2,481
  • 26
  • 113
  • 273

1 Answers1

0

You have an error in your html code. (The spans aren't closed).

This is the code without these errors:

<div class="intpol3">
    <table class="table table-bordered">
        <tr>
          <td></td> 
          <td class="warning">Try us</td>
          <td class="success">The basics</td>
          <td class="info">The lot</td>
          <td class="danger">!!!</td>
        </tr>

        <tr>
          <td>1</td>    
          <td>$7</td>
          <td>$8</td>
          <td>$9</td>
          <td>$10</td>
        </tr>

        <tr>
          <td>2</td>    
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
        </tr>

        <tr>
          <td>3</td>    
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
        </tr>

        <tr>
          <td>4</td>    
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
        </tr>

        <tr>
          <td>5</td>    
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
        </tr>

        <tr>
          <td>6</td><div class="intpol4">   
          <td><span class="glyphicon glyphicon-remove"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
          <td><span class="glyphicon glyphicon-ok"></span></td>
        </tr></div>

    </table>
</div>

For same width-columns this answer might be what you were looking for already:

https://stackoverflow.com/a/18498071/3686898

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

Let me know if this solves your issues already. I don't really understand your problem, so maybe put a little more explanation into it if necessary :)

Community
  • 1
  • 1
Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59