html - Bootstrap css，如何减小 "th"和 "td"的宽度？

Question

这link是我的 html 代码，我使用 bootstrap 来设计我的页面。

我无法减小“th”和“td”的宽度，我尝试使用这段代码style="width:50px"来减小"th"的宽度:

<th class="text-center" style="width:50px">JAN</th>

而这段代码 style="width:50px" 减少“td”:

<td class="text-center" style="width:50px">
   <input type="text">
</td>

但是没有效果，“th”和“td”元素仍然很宽，如下图:

如何减小“th”和“td”的宽度？

Answer 1

input 元素破坏了您的表格布局。

将td内的input元素设置为width: 100%

table td input {
  width: 100%;
}

参见 fiddle :https://jsfiddle.net/pfxcswy2/9/