4

Ok I was trying to do a table with input fields. To set the sizes of each field I understood that I had to set the col-size in the header.

<thead>
    <tr>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-1">Small</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-1">Small</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-2">Large</th>
    </tr>
</thead>

However the inputs expand to their max width with no regard to col-size.

http://jsfiddle.net/m79HR/

Possibly this is an improper use of Bootstrap but I saw it as a best bet for inline inputs with headers above.

Also, lets say I want this particular grid to have 18 columns instead of the default 12 is that possible here just in this particular case?

Ingó Vals
  • 4,788
  • 14
  • 65
  • 113

3 Answers3

16

Just add the "form-control" class to the inputs and bootstrap takes care of the rest.

Doing it this way makes it easier to add columns or change the width, since you only have to change in the header as opposed to every row/input.

<table class="table table-condensed">
    <thead>
        <tr>
            <th class="col-sm-12 col-md-4">Large</th>
            <th class="col-sm-12 col-md-2">Small</th>
            <th class="col-sm-12 col-md-2">Small</th>
            <th class="col-sm-12 col-md-2">Small</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
        </tr>
    </tbody>
</table>
Lifes
  • 1,226
  • 2
  • 25
  • 45
8

You need to use the class col-md-* for normal screens col-sm-* for tablet screen and col-xs-* for mobile screen, there is also col-lg-* for larger screens, you can combine all these classes to make it responsive, like:

<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Very Small</th>
                    <th>Very Small</th>
                    <th>Very Small</th>
                    <th>Large</th>
                    <th>Small</th>
                    <th>Medium</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-4">
                        <input class="col-sm-12" placeholder="col-sm-4" />
                    </td>
                    <td class="col-sm-2">
                        <input class="col-sm-12" placeholder="col-sm-2" />
                    </td>
                    <td class="col-sm-3">
                        <input class="col-sm-12" placeholder="col-sm-3" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
Arun
  • 1,528
  • 3
  • 19
  • 34
  • Are you certain? As it is mobile first I would think that `col-sm-2` would be applied to everything bigger if it's not specifically mention. Try it in the fiddle http://jsfiddle.net/m79HR/1/ I don't notice any change. – Ingó Vals Feb 12 '14 at 12:00
  • try adding your code within `
    your table
    `     – Arun Feb 12 '14 at 13:09
  • http://bootply.com/113024# Click on the mobile icon or monitor icon, minimise/maximise the screen and check. – Arun Feb 12 '14 at 13:45
  • The columns are all the same size still. You just reduced the size of the inputs (which I want) but I want it to happens because of columns size. – Ingó Vals Feb 12 '14 at 15:22
  • Then add those classes to tag. – Arun Feb 12 '14 at 15:23
  • It is the input that is the problem. Look at this here. Same table, one with text the other with input. http://bootply.com/113051 http://jsfiddle.net/m79HR/2/ Notice how the small columns have a bigger size when they have a input control in them. – Ingó Vals Feb 12 '14 at 15:39
  • Ah, I can actually add col-sm-12 to each input as well as the tablehead, that works. http://jsfiddle.net/m79HR/4/ – Ingó Vals Feb 12 '14 at 15:53
  • Ok can you grab the code and EDIT it into your answer and then I can accept it so others can learn from my mistakes :) – Ingó Vals Feb 12 '14 at 16:02
  • @IngóVals this doesnt seem to work. Look at your example on latest Chrome browser version – John Zabroski Feb 08 '17 at 21:46
0

For Bootstrap 4, you need to additionally add the d-flex class to the rows, like

<table>
  <thead>
    <tr class="d-flex">
      <th class="col-3">3 columns wide header</th>
      <th class="col-sm-5">5 columns wide header</th>
      <th class="col-sm-4">4 columns wide header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="d-flex">
      <td class="col-3">3 columns wide content</th>
      <td class="col-sm-5">5 columns wide content</th>
      <td class="col-sm-4">4 columns wide content</th>
    </tr>
  </tbody>
</table>
serv-inc
  • 35,772
  • 9
  • 166
  • 188