blocks|key|566454|text|引导程序中的所有表都根据它们的容器进行拉伸，您可以轻松地将表放入您选择的.span*网格元素中。如果您希望删除此属性，您可以创建自己的表类，并简单地将其添加到您想要用其中的内容展开的表中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|566455|.table-nonfluid+{
+++width:+auto+!important;
}|code-block|syntax|javascript|566456|您可以在自己的样式表中添加这个类，并简单地将其添加到表的容器中，如下所示：|566457|<table+class="table+table-nonfluid">+...+</table>|566458|这样，您的更改不会影响引导样式表本身(您可能希望在文档中的其他位置有一个流量表)。|566459|entityMap^0|10|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>All tables within the bootstrap stretch according to their container, which you can easily do by placing your table inside a <code>.span*</code> grid element of your choice. If you wish to remove this property you can create your own table class and simply add it to the table you want to expand with the content within:</p>

<pre><code>.table-nonfluid {
   width: auto !important;
}
</code></pre>

<p>You can add this class inside your own stylesheet and simply add it to the container of your table like so:</p>

<pre><code>&lt;table class="table table-nonfluid"&gt; ... &lt;/table&gt;
</code></pre>

<p>This way your change won't affect the bootstrap stylesheet itself (you might want to have a fluid table somewhere else in your document).</p>


blocks|key|566526|text|我也有同样的问题，我修复了表格，然后指定了我的td宽度。如果你有这样的能力，你也可以做到这些。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|566527|<style>
table+{
table-layout:+fixed;
word-wrap:+break-word;
}
</style>

<td+width="10%25"+/td>|code-block|syntax|javascript|566528|我在.table-nonfluid上没有任何运气。|566529|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I was having the same issue, I made the table fixed and then specified my td width. If you have th you can do those as well.</p>

<pre><code>&lt;style&gt;
table {
table-layout: fixed;
word-wrap: break-word;
}
&lt;/style&gt;

&lt;td width="10%" /td&gt;
</code></pre>

<p>I didn't have any luck with .table-nonfluid.</p>


blocks|key|566572|text|我试着添加style="width:+auto+!important"，对我来说效果很好！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|566573|entityMap^0|5|U|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>I've tried to add <code>style="width: auto !important"</code> and works great for me!</p>


blocks|key|566624|text|<table+style="width:+auto;"+...工作得很好。已在Chrome+38、IE+11和Firefox+34中测试。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|566625|jsfiddle：http://jsfiddle.net/rpaul/taqodr8o/|566626|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rpaul/taqodr8o/^0|0|V|0|9|Z|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p><code>&lt;table style="width: auto;" ...</code> works fine. Tested in Chrome 38 , IE 11 and Firefox 34.</p>

<p>jsfiddle : <a href="http://jsfiddle.net/rpaul/taqodr8o/" rel="noreferrer">http://jsfiddle.net/rpaul/taqodr8o/</a></p>


blocks|key|566679|text|引导程序3：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|566680|为什么要抗争呢？为什么不简单地使用bootstrap网格来控制表格宽度呢？|566681|<div+class="row">
++++<div+class="col-sm-6">
++++++++<table></table>
++++</div>
</div>|code-block|syntax|javascript|566682|这将创建一个宽度为包含元素宽度的一半(12个中的6个)的表。|566683|我有时会根据其他答案使用内联样式，但不鼓励这样做。|566684|引导程序4：|566685|Bootstrap+4有一些很好的宽度助手类，比如w-25、w-50、w-75、w-100和w-auto。这将使表格宽度达到50%25：|offset|length|style|CODE|566686|<table+class="w-50"></table>|566687|这里是文档：https://getbootstrap.com/docs/4.0/utilities/sizing/|566688|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/utilities/sizing/^0|0|0|0|0|0|0|P|4|U|4|Z|4|14|5|1A|6|0|0|6|1F|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1A|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1C|8|@$Q|1D|R|1E|S|T]|$Q|1F|R|1G|S|T]|$Q|1H|R|1I|S|T]|$Q|1J|R|1K|S|T]|$Q|1L|R|1M|S|T]]|9|@]|A|$]]|$1|U|3|V|5|F|7|1N|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1O|8|@]|9|@$Q|1P|R|1Q|1|1R]]|A|$]]|$1|Y|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

<h2>Bootstrap 3:</h2>
<p>Why fight it?  Why not simply control your table width using the bootstrap grid?</p>
<pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot;&gt;
        &lt;table&gt;&lt;/table&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>This will create a table that is half (6 out of 12) of the width of the containing element.</p>
<p>I sometimes use inline styles as per the other answers, but it is discouraged.</p>
<h2>Bootstrap 4:</h2>
<p>Bootstrap 4 has some nice helper classes for width like <code>w-25</code>, <code>w-50</code>, <code>w-75</code>, <code>w-100</code>, and <code>w-auto</code>.  This will make the table 50% width:</p>
<pre><code>&lt;table class=&quot;w-50&quot;&gt;&lt;/table&gt;
</code></pre>
<p>Here's the doc: <a href="https://getbootstrap.com/docs/4.0/utilities/sizing/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/utilities/sizing/</a></p>


blocks|key|350786|text|如果您使用的是Bootstrap4，请使用.w-auto。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|350787|请参阅https://getbootstrap.com/docs/4.1/utilities/sizing/|350788|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.1/utilities/sizing/^0|L|7|0|3|1F|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>If you're using Bootstrap 4, use <code>.w-auto</code>. </p>

<p>See <a href="https://getbootstrap.com/docs/4.1/utilities/sizing/" rel="noreferrer">https://getbootstrap.com/docs/4.1/utilities/sizing/</a></p>


<p>Suppose this markup:</p>

<pre><code>&lt;table class="table table-bordered" align="center"&gt; 
</code></pre>

<p>No mather how many cells I have, the table is always 100% width. Why's that? </p>


Why do Twitter Bootstrap tables always have 100% width?

假设标记如下：<table class="table table-bordered" align="center"> 不管我有多少个单元格，表格总是100%宽。为什么会这样呢？

问为什么Twitter Bootstrap表总是有100%的宽度？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Twitter Bootstrap表总是有100%的宽度？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Twitter Bootstrap表总是有100%的宽度？
EN