twitter-bootstrap 更改列宽引导表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20828224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change column width bootstrap tables
提问by Norman Bird
I have a static PHP site I'm using Bootstrap on. The tables are controlled by Bootstrap.
我有一个使用 Bootstrap 的静态 PHP 站点。这些表由 Bootstrap 控制。
I've noticed that I have seemingly no control over the lengths of the TDsections so that I can prevent the phone numbers, etc..., from wrapping. As you can see there is plenty of space on the end, just don't know how to spread that space out.
我注意到我似乎无法控制各TD部分的长度，因此我可以防止电话号码等被换行。正如您所看到的，最后有足够的空间，只是不知道如何扩展该空间。
I tried inline widths on the <th>but nothing happens:
我尝试了内联宽度，<th>但没有任何反应：
<table class="table table-condensed table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th width="12%">Last Name</th>
<th width="12%">First Name</th>
<th width="12%">Spouse's Name</th>
<th width="20%">Address</th>
<th width="5%">City</th>
<th width="12%"class="did_phone">Phone</th>
<th width="15%">E-Mail</th>
<th width="15%"></th>
</tr>
</thead>
<tbody>
So... how does one change the <td>widths, make adjustments so there is no wrapping, in Bootstrap?
那么...如何<td>在 Bootstrap 中更改宽度、进行调整以便没有换行？
回答by Norman Bird
Bootstrap makes tables 100%. So Tables this set to 100%. The solution is to make it auto. So I simply overrode Bootstrap by adding the following to my css:
Bootstrap 制作表格100%。因此 Tablesth设置为100%. 解决办法是让它auto。所以我只是通过将以下内容添加到我的 css 来覆盖 Bootstrap：
table th {
width: auto !important;
}
And everything lined up perfectly.
一切都完美地排列起来。
回答by David Navarro Astudillo
You could try using this style="width:12%" in each th.
您可以尝试在每个 th 中使用此 style="width:12%" 。
Example:
例子：
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th style="width:12%">Last Name</th>
<th style="width:12%">First Name</th>
<th style="width:12%">Spouse's Name</th>
<th style="width:20%">Address</th>
<th style="width:5%">City</th>
<th style="width:12%"class="did_phone">Phone</th>
<th style="width:15%">E-Mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Last Name</td>
<td>First Name</td>
<td>Spouse's Name</td>
<td>Adress</td>
<td>City</td>
<td>Phone</td>
<td>E-Mail</td>
</tr>
</tbody>
</table>
回答by BuddhistBeast
A quick and easy fix is to just add 'padding' to the tags instead of actual width percentages. I have no experience in Bootstrap but I am assuming that you can do inline CSS styling with your example above or even maybe you have your own CSS styles page linked up to everything. Either way, I have created an example for you.
一个快速而简单的解决方法是向标签添加“填充”而不是实际宽度百分比。我没有使用 Bootstrap 的经验，但我假设您可以使用上面的示例进行内联 CSS 样式设置，或者您甚至可以将自己的 CSS 样式页面链接到所有内容。无论哪种方式，我都为您创建了一个示例。
In the demo, I have just created a CSS style for th as shown below:
在演示中，我刚刚为 th 创建了一个 CSS 样式，如下所示：
th{
padding: 0px 0px 0px 50px;
}
The padding will give space between everything in the row, in fact, if you add this to every row then it will always stay consistent. I encourage you to play around with the fiddle to found out what works best for you!
填充将在行中的所有内容之间留出空间，事实上，如果将其添加到每一行，则它将始终保持一致。我鼓励您玩弄小提琴，找出最适合您的方法！
The last option I present to you is this one:
我向您展示的最后一个选项是：
This example uses strictly only width. In fact, the easiest way to do this is to set an overall width for the table and then adjust the with for the th tags as needed. You have your percentages marked up already (which is a great idea) but you aren't actually getting anything.. right now your th tags think there is a width of 0 because you have yet to specify how big you want the th tags to become. Let's take a look at the code:
此示例仅使用严格的宽度。事实上，最简单的方法是为表格设置一个整体宽度，然后根据需要调整第 th 个标签的 with。你已经标记了你的百分比（这是一个好主意）但你实际上没有得到任何东西......现在你的 th 标签认为宽度为 0 因为你还没有指定你想要的 th 标签有多大变得。我们来看一下代码：
table{
border: 1px solid black;
width: 1000px;
}
th{
width: 900px;
}
You can see that table sets the initial width and then th can set a width, assuming it is less than or equal to the tables width margins. This should fix up any problem as well. I have given you two options to work out :)
您可以看到 table 设置初始宽度，然后可以设置宽度，假设它小于或等于 table 宽度边距。这也应该可以解决任何问题。我给了你两个选择来解决:)
One thing to note, I added in a border for the table, it made it more readable for me so that I could perform the demo. Take it out if you need to!
需要注意的一件事是，我为表格添加了边框，它使我更易读，以便我可以执行演示。需要的时候拿出来！
Good luck :)
祝你好运 ：）
回答by ACHUTANANDA
<table class="table table-condensed table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th width="12%">Last Name</th>
<th width="12%">First Name</th>
<th width="12%">Spouse's Name</th>
<th width="20%">Address</th>
<th width="2%">City</th>
<th width="12%"class="did_phone">Phone</th>
<th width="15%">E-Mail</th>
<th width="15%"></th>
</tr>
</thead>
<tbody>
