Bootstrap css,how to reduce the width of "th" and "td"? - html

Question

This link is my html's code,I use bootstrap to design my page.
I can't reduce the width of "th" and "td",I tried to use this code style="width:50px" to reduce the width of "th":
<th class="text-center" style="width:50px">JAN</th>
And this code style="width:50px" to reduce "td":
<td class="text-center" style="width:50px">
<input type="text">
</td>
But there is no effect,the "th" and "td" element still very wide,like this picture:
How to reduce the width of "th" and "td"?

Answer 1

The input elements are breaking your table layout.
Set the input elements inside the td as width: 100%
table td input {
width: 100%;
}
See fiddle: https://jsfiddle.net/pfxcswy2/9/

Answer 2

At the top th tag add width='1'
This will make the column width depending on rows content
<th width='1' class="text-center" style="width:50px">JAN</th>

Answer 3

You can try table-condensed class in your table.
The .table-condensed class makes a table more compact by cutting cell padding in half.
<table border="1" class="table table-bordered text-right table-condensed">
<thead>
<tr bgcolor="#337ab7">
<th class="text-center">No</th>
<th class="text-center">JAN</th>
<th class="text-center">name</th>
<th class="text-center">size</th>
<th class="text-center">except</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
This is a quick solution. See if this helps otherwise we will have to write our own css class with higher specificity.

Answer 4

This behavior is due to the bootstrap's styling of th and elements which is given the width of 10%.
.table>thead>tr>th {
width: 10%;
}
All we need to do is use our own style's to override the bootstrap style.
use this code in your external style sheet.It reduces the width to minimum.
Do the same for td's with small modifications according to your need.
CSS code:[ To have the same behaviour through out use below CSS code]
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td,
.table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
width:0% !important;
}
But this change will be overrided everywhere you use table.Better is to give some class name for the particular row you want your new styles on.
HOPE THIS WILL HELP !