CODEWITHSUNDEEP
twitter-bootstrapresizehtml-table
Norman Bird
Norman Bird

Reputation: 682

Change column width bootstrap tables

I have a static PHP site I'm using Bootstrap on. The tables are controlled by Bootstrap.

I've noticed that I have seemingly no control over the lengths of the TD sections so that I can prevent the phone numbers, etc..., from wrapping. As you can see there is plenty of space on the end, just don't know how to spread that space out.

I tried inline widths on the <th> but nothing happens:

  <table class="table table-condensed table-striped  table-hover">
  <thead>
    <tr>
        <th>#</th>
        <th width="12%">Last Name</th>
        <th width="12%">First Name</th>
        <th width="12%">Spouse's Name</th>
        <th width="20%">Address</th>
        <th width="5%">City</th>
        <th  width="12%"class="did_phone">Phone</th>
        <th width="15%">E-Mail</th>
         <th width="15%"></th>
    </tr>
  </thead>
  <tbody>

So... how does one change the <td> widths, make adjustments so there is no wrapping, in Bootstrap?

Upvotes: 18

Views: 102970

Answers (5)

Falcon
Falcon

Reputation: 468

In my case setting up width in percentage value doesn't change anything (I'm using bootstrap 4). But parameter min-width do the trick after applying it to the css class:

  <table class="table table-condensed table-striped  table-hover">
  <thead>
    <tr>
        <th>#</th>
        <th class="small-col">Last Name</th>
        <th class="small-col">First Name</th>
        <th class="small-col">Spouse's Name</th>
        <th class="small-col">Address</th>
        <th class="small-col">City</th>
        <th class="did_phone">Phone</th>
        <th class="small-col">E-Mail</th>
         <th class="small-col"></th>
    </tr>
  </thead>
  <tbody>

.small-col {
  min-width: 10vw;
}

.did_phone {
  min-width: 20vw;
}

I'm not using percentage value which is relative to the parent element by vw (viewport width) which is relative to 1% of the width of the viewport.

Upvotes: 0

ACHUTANANDA
ACHUTANANDA

Reputation: 1

<table class="table table-condensed table-striped  table-hover">
 <thead>
 <tr>
    <th>#</th>
    <th width="12%">Last Name</th>
    <th width="12%">First Name</th>
    <th width="12%">Spouse's Name</th>
    <th width="20%">Address</th>
    <th width="2%">City</th>
    <th  width="12%"class="did_phone">Phone</th>
    <th width="15%">E-Mail</th>
     <th width="15%"></th>
 </tr>
 </thead>
<tbody>

Upvotes: 0

David Navarro Astudillo
David Navarro Astudillo

Reputation: 1369

You could try using this style="width:12%" in each th.

Example:

<table class="table table-bordered">
 <thead>
 <tr>
    <th>#</th>
    <th style="width:12%">Last Name</th>
    <th style="width:12%">First Name</th>
    <th style="width:12%">Spouse's Name</th>
    <th style="width:20%">Address</th>
    <th style="width:5%">City</th>
    <th  style="width:12%"class="did_phone">Phone</th>
    <th style="width:15%">E-Mail</th>
 </tr>
 </thead>
 <tbody>
    <tr>
        <td>1</td>
        <td>Last Name</td>
        <td>First Name</td>
        <td>Spouse's Name</td>
        <td>Adress</td>
        <td>City</td>
        <td>Phone</td>
        <td>E-Mail</td>
    </tr>
 </tbody>
</table>

Upvotes: 4

Norman Bird
Norman Bird

Reputation: 682

Bootstrap makes tables 100%. So Tables th is set to 100%. The solution is to make it auto. So I simply overrode Bootstrap by adding the following to my css:

table th {
    width: auto !important;
}

And everything lined up perfectly.

Upvotes: 16

BuddhistBeast
BuddhistBeast

Reputation: 2670

A quick and easy fix is to just add 'padding' to the tags instead of actual width percentages. I have no experience in Bootstrap but I am assuming that you can do inline CSS styling with your example above or even maybe you have your own CSS styles page linked up to everything. Either way, I have created an example for you.

DEMO

In the demo, I have just created a CSS style for th as shown below:

th{
    padding: 0px 0px 0px 50px;
}

The padding will give space between everything in the row, in fact, if you add this to every row then it will always stay consistent. I encourage you to play around with the fiddle to found out what works best for you!

The last option I present to you is this one:

DEMO

This example uses strictly only width. In fact, the easiest way to do this is to set an overall width for the table and then adjust the with for the th tags as needed. You have your percentages marked up already (which is a great idea) but you aren't actually getting anything.. right now your th tags think there is a width of 0 because you have yet to specify how big you want the th tags to become. Let's take a look at the code:

table{
    border: 1px solid black;
    width: 1000px;
}
th{
    width: 900px;
}

You can see that table sets the initial width and then th can set a width, assuming it is less than or equal to the tables width margins. This should fix up any problem as well. I have given you two options to work out :)

One thing to note, I added in a border for the table, it made it more readable for me so that I could perform the demo. Take it out if you need to!

Good luck :)

Upvotes: 2

Related Questions