更改列宽引导表答案

【问题标题】：Change column width bootstrap tables更改列宽引导表
【发布时间】：2014-01-16 16:05:50
【问题描述】：

我有一个使用 Bootstrap 的静态 PHP 站点。这些表由 Bootstrap 控制。

我注意到我似乎无法控制 TD 部分的长度，因此我可以防止电话号码等...如您所见，最后有足够的空间，只是不知道如何将空间分散开。

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

那么...如何在 Bootstrap 中更改 <td> 的宽度、进行调整以使不换行？

【问题讨论】：

链接失效。
@Timo 感谢您的提醒。它不再在我的 GDrive 中可用。下次我将使用 imigur 或一些更永久的资源。我编辑了我的帖子。谢谢

标签： twitter-bootstrap resize html-table

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以尝试在每一天使用这个 style="width:12%"。

例子：

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

【讨论】：

【解决方案3】：

Bootstrap 制作表格100%。所以表th 设置为100%。解决方案是将其设为auto。所以我只是通过在我的 css 中添加以下内容来覆盖 Bootstrap：

table th {
    width: auto !important;
}

一切都完美排列。

【讨论】：

我发现设置表 {width: auto !important;} 可以解决问题（使用 Bootstrap 3）。设置 TH 无效，但您的回答为我指明了正确的方向 + 1
@PortageMonkey 在我的情况下，如果没有th，它就无法工作。

【解决方案4】：

一个快速简单的解决方法是在标签中添加“填充”而不是实际的宽度百分比。我在 Bootstrap 方面没有经验，但我假设您可以使用上面的示例进行内联 CSS 样式设置，或者您甚至可以将自己的 CSS 样式页面链接到所有内容。无论哪种方式，我都为您创建了一个示例。

DEMO

在演示中，我刚刚为 th 创建了一个 CSS 样式，如下所示：

th{
    padding: 0px 0px 0px 50px;
}

填充将在行中的所有内容之间留出空间，事实上，如果您将其添加到每一行，那么它将始终保持一致。我鼓励你玩弄小提琴来找出最适合你的方法！

我给你的最后一个选项是这个：

DEMO

此示例仅严格使用宽度。事实上，最简单的方法是设置表格的整体宽度，然后根据需要调整 th 标签的 with。您已经标记了您的百分比（这是一个好主意），但您实际上并没有得到任何东西.. 现在您的 th 标签认为宽度为 0，因为您尚未指定您希望 th 标签的大小变得。我们看一下代码：

table{
    border: 1px solid black;
    width: 1000px;
}
th{
    width: 900px;
}

可以看到 table 设置初始宽度，然后 th 可以设置宽度，假设它小于或等于表格宽度边距。这也应该解决任何问题。我给了你两个选择：)

有一点需要注意，我在表格中添加了边框，它让我更易读，这样我就可以执行演示了。需要的话就拿出来吧！

祝你好运:)

【讨论】：