Width of table header columns in Bootstrap table - html

Question

I'm using Bootstrap and have a table with the following structure and style:
<table class="table table-bordered">
<tr>
<th>Keyword</th>
<th>AdWords top</th>
<th>AdWords right</th>
<th>AdWords total</th>
<th>URLs of top AdWords</th>
<th>URLs of right AdWords</th>
<th>Non-Adwords results</th>
<th>Non-Adwords urls</th>
<th>Total links on page</th>
<th>Total SERP results</th>
<th>Cached SERP</th>
</tr>
....
However, when I'm printing out my data, it looks really ugly:
That is why I have several questions:
How to make a normal width of a column with a text inside <th> elements in order to fit the text inside the cell
How to make al the text inside <th> aligned by center

Answer 1

It seems like you are missing "thead". For bootstrap styles to correctly apply, you need to make sure you're html markup is correct.
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>

Answer 2

Solved!
In SCSS file add a new custom class:
.withoutTransfer{
white-space: nowrap;
}
Then use it in table:
<thead>
<tr class="withoutTransfer">
....
</tr>
</thead>
Now the table headers looks pretty.

Answer 3

try this
setting widths for your table cells if you apply the rule 'table-layout: fixed' to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
`table-layout: fixed; width: 100%`;