CODEWITHSUNDEEP
csstwitter-bootstrap
HukeLau_DABA
HukeLau_DABA

Reputation: 2528

How do I resize the td of a table styled with bootstrap?

I read http://getbootstrap.com/css/#tables which didn't mention resizing tds in any specific way, so I tried the following css:

.cbCell {
    width: 25px;
}

.smallerCell {
    width: 240px;
}

.textfield {
    width: 230px;
}

with this html

<thead>
      <tr>
        <th class="cbCell"><input type='checkbox' class='form-control' id='selectall'></th>
        <th class="text-center smallerCell">Employee Name</th>
        <th class="text-center smallerCell">Mail</th>
      </tr>
    </thead>
    <tbody>
      <tr id='addr0'>
        <td class="cbCell"><input type='checkbox' class='form-control case'></td>
        <td class="smallerCell"><input type="text" name='name0'  placeholder='Name' class="form-control textfield"/></td> 
        <td class="smallerCell"><input type="text" name='mail0' placeholder='Mail' class="form-control textfield"/></td>
      </tr>
      <tr id='addr1'>
      </tr>
    </tbody>

The textfields have been resized but the td has not, the 'smallerCell' style isn't applied

name and mail cols need to just cover the textfields

I tried Change column width bootstrap tables which didn't work for me. I used the grid system to float the establishment info to the right, I ultimately want the name and mail columns to fit the smaller textfield size, and for there to be a margin and vertical rule dividing the People and Establishment columns.

Upvotes: 1

Views: 10790

Answers (1)

Ravi Dasari
Ravi Dasari

Reputation: 463

Change table width to auto. In boot strap table width is set to 100%

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

so make it 

.table {
width: auto;
}

in you css.

Upvotes: 1

Related Questions