Bootstrap中的列宽

Question

Please bear with me if this is a simple question (I'm an iOS developer trying to learn CSS-Bootstrap.

I first played with rows :

     <div class="row">
         <div class="col col-1">
          <p>Plan</p>
        </div>  
        <div class="col col-2">
          <p>Date</p>
        </div>
        <div class="col col-2">
          <p>Person</p>
        </div>
         <div class="col col-3">
          <p>Description</p>
        </div>  
        <div class="col col-1">
          <p>Time</p>
        </div>
        <div class="col col-3">
          <p>Line</p>
        </div>
      </div>

And this was perfect :

I then tried to do the same with tables, first without setting the columns for the grid :

    <div class="container-fluid">
        <table class="table">
            <thead>
                <tr>
                    <th">Plan</th>
                    <th">Date</th>
                    <th>Person</th>
                    <th>Description</th>
                    <th>Time</th>
                    <th>Line</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> <input type="checkbox" name="Plan"> </td>
                    <td> <input type="date" name="date"> </td>
                    <td> <input type="text"></td>
                    <td> <input type="text"></td>
                    <td> <input type="time"></td>
                    <td> <input type="text"></td>
                </tr>
                     <tr>
                    <td> <input type="checkbox" name="Plan"> </td>
                    <td> <input type="date" name="date"> </td>
                    <td> <input type="text"></td>
                    <td> <input type="text"></td>
                    <td> <input type="time"></td>
                    <td> <input type="text"></td>

            </tbody>
        </table>
    </div>

Not bad but I want some columns to be smaller (Plan, Time, Date) and others to be bigger. So I added the classes for those columns (just like I did when experimenting with rows :

<div class="container-fluid">
            <table class="table">
                <thead>
                    <tr>
                        <th class="col col-1">Plan</th>
                        <th class="col col-2">Date</th>
                        <th class="col col-2">Person</th>
                        <th class="col col-3">Description</th>
                        <th class="col col-1">Time</th>
                        <th class="col col-3">Line</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col col-1"> <input type="checkbox" name="Plan"> </td>
                        <td class="col col-2"> <input type="date" name="date"> </td>
                        <td class="col col-2"> <input type="text"></td>
                        <td class="col col-3"> <input type="text"></td>
                        <td class="col col-1"> <input type="time"></td>
                        <td class="col col-3"> <input type="text"></td>
                    </tr>
                         <tr>
                        <td  class="col col-1"> <input type="checkbox" name="Plan"> </td>
                        <td class="col col-2"> <input type="date" name="date"> </td>
                        <td class="col col-2"> <input type="text"></td>
                        <td class="col col-3"> <input type="text"></td>
                        <td class="col col-1"> <input type="time"></td>
                        <td class="col col-3"> <input type="text"></td>

                </tbody>
            </table>
        </div>

But to my surprise. The first column (Plan) was lot bigger (and not smaller) and the other all remained the same:

I tried with setting the in both header and body (like code above) and only in header. The result was the same.

Answer 1

First things first, the first table item (Plan) is much larger when you are using columns because of "container-fluid". Try just "container". Per the documentation, "container-fluid" is full width which means it is expanding to fill the screen.

Next, columns are not what you would need to make the table items widths smaller.

The top layout is with column classes with the table. The bottom layout is a standard table layout with no column classes. As you can see, the smallest possible column width (col-1) is larger than the default sizing for the table items. If you want something to be smaller than that (the default sizing for the table), then you will have to mess around with the sizing of the table itself. (setting the padding-right or padding-left to 0rem for specific td elements helps trim the excess spacing for example)

my code for the "columned" table:

<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th class="col-xl-1">Plan</th>
                <th class="col-xl-2">Date</th>
                <th class="col-xl-2">Person</th>
                <th class="col-xl-3">Description</th>
                <th class="col-xl-1">Time</th>
                <th class="col-xl-3">Line</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="col-xl-1"> <input type="checkbox" name="Plan"></td>      
                <td class="col-xl-2"> <input type="date" name="date"> </td>
                <td class="col-xl-2"> <input type="text"></td>
                <td class="col-xl-3"> <input type="text"></td>
                <td class="col-xl-1"> <input type="time"></td>
                <td class="col-xl-3"> <input type="text"></td>
            </tr>
            <tr>
                 <td  class="col-xl-1"> <input type="checkbox" name="Plan"> </td>
                 <td class="col-xl-2"> <input type="date" name="date"> </td>
                 <td class="col-xl-2"> <input type="text"></td>
                 <td class="col-xl-3"> <input type="text"></td>
                 <td class="col-xl-1"> <input type="time"></td>
                 <td class="col-xl-3"> <input type="text"></td>
        </tbody>
    </table>
</div>

By the way I am using bootstrap version 4 alpha 6. If you are on a lower version of bootstrap, replace all instances of "col-xl-#" with "col-lg-#". The newest bootstrap has xl as its largest size.