Question

我在对齐th和td内容时遇到麻烦。我不知道该怎么办，我在bootstrap 4 ex中使用了所有可能的类：文本中心，中心块，align-items-center，justify-content-center等，但表看起来一样。请给我一个解决此问题的想法，或者更好地帮助我发现问题。预先感谢。Table Employee

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

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

1 个答案: