我有三个标准的Bootstrap 4表。但是，这三个宽度的td宽度不一致。
我不知道我的结构中是否缺少可以标准化宽度的实用程序。我以为这可能与现在Bootstrap 4中的Flex功能有关，但是我添加的内容似乎都不会对我的标记产生影响。
这与我向每个元素写入的文本量有关吗？
<div class="row pt-2 pb-4">
<table class="table pb-5">
<thead class="border-0">
<tr>
<th class="border-top-none typeface-montserrat-500" scope="col">Content here with text</th>
<th class="border-top-none" scope="col"></th>
<th class="border-top-none" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
</tbody>
</table>
</div>
<div class="row pt-2 pb-4">
<table class="table pb-5">
<thead class="border-0">
<tr>
<th class="border-top-none typeface-montserrat-500" scope="col">Content here with text</th>
<th class="border-top-none" scope="col"></th>
<th class="border-top-none" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content with more text here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content with more text here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
</tbody>
</table>
</div>
<div class="row pt-2 pb-4">
<table class="table pb-5">
<thead class="border-0">
<tr>
<th class="border-top-none typeface-montserrat-500" scope="col">Content here with some different text again</th>
<th class="border-top-none" scope="col"></th>
<th class="border-top-none" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here once more</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content with more text here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content with more text here</td>
<td class="color-grey-dark">Content here with even more text</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：1)
过去，这是其他引导表的问题。将style="width: 33.3333%"添加到每个<th>标签时似乎可以解决问题。它将标准化表格列的宽度。
使用此资源帮助回答您的其他问题：How to set up fixed width for <td>?
<div class="row pt-2 pb-4">
<table class="table pb-5">
<thead class="border-0">
<tr>
<th style="width: 33.3333%" class="border-top-none typeface-montserrat-500" scope="col">Content here with text</th>
<th style="width: 33.3333%" class="border-top-none" scope="col"></th>
<th style="width: 33.3333%" class="border-top-none" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
</tbody>
</table>
</div>
<div class="row pt-2 pb-4">
<table class="table pb-5">
<thead class="border-0">
<tr>
<th style="width: 33.3333%" class="border-top-none typeface-montserrat-500" scope="col">Content here with text</th>
<th style="width: 33.3333%" class="border-top-none" scope="col"></th>
<th style="width: 33.3333%" class="border-top-none" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content with more text here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content with more text here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
</tbody>
</table>
</div>
<div class="row pt-2 pb-4">
<table class="table pb-5">
<thead class="border-0">
<tr>
<th style="width: 33.3333%" class="border-top-none typeface-montserrat-500" scope="col">Content here with some different text again</th>
<th style="width: 33.3333%" class="border-top-none" scope="col"></th>
<th style="width: 33.3333%" class="border-top-none" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here once more</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content with more text here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content with more text here</td>
<td class="color-grey-dark">Content here with even more text</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
<tr>
<td>Content here</td>
<td class="color-grey-dark">Content here</td>
<td><a href="" class="btn btn-blue-light float-right px-4 py-1">Content here</a></td>
</tr>
</tbody>
</table>
</div>