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

Question

这link是我的html代码，我使用引导程序设计页面。

我无法减小“ 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内的输入元素设置为width: 100%

table td input {
  width: 100%;
}

请参见小提琴：https://jsfiddle.net/pfxcswy2/9/

Answer 2

此行为是由于引导程序的th和元素的样式给定的，宽度为10％。

.table>thead>tr>th {
width: 10%;
}

我们需要做的就是使用我们自己的样式来覆盖引导样式。 在外部样式表中使用此代码。它将宽度减小到最小。 对td进行相同的操作，并根据需要进行一些小的修改。 CSS代码：[要在CSS代码下方使用完全相同的行为]

.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;
 }

但是这种更改将在您使用table的任何地方被覆盖。更好的方法是为要使用新样式的特定行提供一些类名。

希望可以帮助您！

Answer 3

在顶部标签处添加width ='1' 这将使列宽取决于行内容

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

Answer 4

您可以尝试在表中进行表压缩类。 .table-condensed类通过将单元格填充减半来使表更紧凑。

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

这是一个快速的解决方案。看看这是否有帮助，否则我们将不得不编写更高特异性的css类。