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样式页面链接到所有内容。无论哪种方式，我都为你创造了一个例子。

DEMO

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

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

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

我向你呈现的最后一个选项就是这个：

DEMO

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

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

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

有一点需要注意，我在桌子的边框中添加了它，这使我对它更具可读性，以便我可以执行演示。如果需要，请把它拿出来！

祝你好运：）

Answer 3

你可以尝试在每一个中使用这种风格=“宽度：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>

Answer 4

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

更改列宽引导表

4 个答案: