更改列宽引导表

Question

我有一个静态PHP站点,我正在使用Bootstrap.这些表由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>

那么...... <td>在Bootstrap中如何改变宽度,进行调整以便没有包装？

Answer 1

Bootstrap制作表格100%.因此,表格th设置为100%.解决方案就是成功auto.所以我只是通过在我的css中添加以下内容来覆盖Bootstrap:

table th {
    width: auto !important;
}

一切都排好了.

Answer 2

一个快速而简单的解决方法是仅向标签添加“填充”而不是实际宽度百分比。我没有 Bootstrap 经验，但我假设您可以使用上面的示例进行内联 CSS 样式设置，甚至可能您有自己的 CSS 样式页面链接到所有内容。不管怎样，我已经为你创建了一个例子。

演示版

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

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

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

我向您提供的最后一个选项是：

演示版

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

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

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

需要注意的一件事是，我添加了表格的边框，这使得它对我来说更具可读性，以便我可以执行演示。有需要的话就拿出来吧！

祝你好运 ：）