Change column width bootstrap tables

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.

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>

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 :)

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.

<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>