如何使用 Bootstrap 4 对齐表格的 th 和 td 内容？

Question

我在对齐 th 和 td 内容时遇到了麻烦。 我不知道还能做什么，我已经使用了 bootstrap 4 中所有可能的类，例如：text-center、center-block、align-items-center、justify-content-center 和其他，但表格看起来是一样的。 请给我一个解决此问题的想法或更好地帮助我找到问题。 提前致谢。 表员工

<div class="container-fluid" >
<div class="card border-1">
<div class="table-responsive  my-auto">
 <table id="tabla" class="table table-fixed table-striped table-condensed 
  text-nowrap mb-1">  
        <tr class="card-header bg-info text-center " style="color:white;">
            <th>Id</th>
            <th>Name Employees</th>
            <th>User Name</th>
            <th>Department</th>
            <th>Position</th>
            <th>Campaign</th>
            <th></th>
            <th></th>
        </tr>
        <tr class="text-center"  >
            <td>'.$item['id_employee'].'</td>
            <td>'.$item['name_employee'].'</td>
            <td>'.$item['user_employee'].'</td>
            <td>'.$item['name_department'].'</td>
            <td>'.$item['name_position'].'</td>
            <td>'.$item['name_campaign'].'</td>

            <!--BUTTON DEL MODAL-->
            <td><a href="options.php?action=editEmployee&edit='.$item["id_employee"].'"> 
            <button type="button" style="border-radius:8px;" class="btn btn-outline-primary btn-sm"> 
            <i class="fas fa-edit"></i></button></a></td>

             <td>
        <a href="options.php?action=employee&Del_Employee='.$item["id_employee"].'"> 
             <button style="border-radius:8px;" class="btn btn-outline-danger btn-sm" type="button">
             <i class="fas fa-trash"></i></button></a></td> 
      </tr>
      </table>
      </div>
      </div>
      </div>

Answer 1

从图片来看，看起来你有多个表，比如：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> <tbody> <tr> <td>1</td> <td>John Smith</td> <td>N/A</td> </tr> </tbody> </table> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> <tbody> <tr> <td>2</td> <td>Frank Peters</td> <td>Frank Peters has a much longer description than John</td> </tr> </tbody> </table>

拥有多个表意味着每个表将调整其列的大小，独立于其他表。

您要做的是将它们放在同一张表中：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> <tbody> <tr> <td>1</td> <td>John Smith</td> <td>N/A</td> </tr> </tbody> <thead> <tr> <th>ID</th> <th>Name</th> <th>Description</th> </tr> <tbody> <tr> <td>2</td> <td>Frank Peters</td> <td>Frank Peters has a much longer description than John</td> </tr> </tbody> </table>