在一行中显示所有列，并且不会溢出到HTML中的下一行

我有一个HTML页面，布局如下：

问题是。我希望MSAN和Users列在同一行中，否则，对于大量记录，它将不适合。这是我的HTML文件。忽略值是如何显示的，或者是哪个

<div class="panel panel-default">
  <div class="panel-heading">
    <br>
      <h1 style="text-align: center">License Generator</h1><br>
      <div class="row" [hidden]="!deleteMessage">
           
                <!--<div class="col-sm-4"></div> -->
                <div> <!---->
                        <div class="alert alert-info alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <strong>License Deleted</strong>
                        </div>
                </div>
                <!-- <div class="col-sm-4"></div> -->
        </div>           
    </div>

  
  <div class="panel-body">
      <table  class="table table-hover table-sm" datatable [dtOptions]="dtOptions"
      [dtTrigger]="dtTrigger"  >
          <thead class="thead-light">
              <tr>
                  <th>Customer ID</th>
                  <th>Hardware Key</th>
                  <th>Product</th>
                  <th>License Key</th>
                  <th>Action</th>  
              </tr>
          </thead>
          <tbody>
               <tr *ngFor="let student of students ">
                  <td>33333</td>
                  <td>22222</td>
                  <td>ABC</td>
                  <td><textarea rows="2" cols="20" wrap="hard">fxLBJ0BF5b+CLBCW9xamqsCgP0AyVIVpCCiYGI3WfEOAPPB7nVgHipERQmv2wVJYQI9PwfpS+4qP5owl4eDfI/f42cbu+SBTty3Sk/sGzZfon1xUndfAzsqbHD/DbFjQAtbpzeB7yr7AtNSV22WBv/lwC4ZW0k1KGR44tNM8aW5UQf9/WmuKeM/dFKIiW6vKMd9dn35jJ5AdlUIBRKwTFg==</textarea></td>
                  <td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>&nbsp;
                    <button (click)="updateStudent(student.student_id)" class='btn btn-primary'
                    data-toggle="modal" data-target="#myModal">Update</button>&nbsp;
                    <button (click)="updateStudent(student.student_id)" class='btn btn-primary'
                    data-toggle="modal" data-target="#myModal">Copy License Key</button>
                  </td>
                </tr> 
          </tbody><br>
          <thead class="thead-light">
            <tr>
                <th>Max MSAN</th>
                <th>Max Users</th>
            </tr>
        </thead>
        <tbody>
          <tr *ngFor="let student of students ">
             <td>10000</td>
             <td>10000</td>
           </tr> 
        </tbody><br>
      </table>
  </div>
</div> 

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
                <form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)">
            <!-- Modal Header -->
            <div class="modal-header">
              <h4 class="modal-title" style="text-align: center">Update Student</h4>
              
            </div>
            
            <!-- Modal body -->
            <div class="modal-body" *ngFor="let student of studentlist " >
                <div [hidden]="isupdated">

                    <input type="hidden" class="form-control"  formControlName="student_id" [(ngModel)]="student.student_id">
                            <div class="form-group">
                                <label for="name">Student Name</label>
                                <input type="text" class="form-control"  formControlName="student_name" [(ngModel)]="student.student_name"  >
                            </div>
                    
                            <div class="form-group">
                                <label for="name">Student Email</label>
                                <input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
                            </div>
                    
                            <div class="form-group">
                                <label for="name">Student Branch</label>
                                  <select class="form-control" formControlName="student_branch" required>                                   
                                    <option value="B-Tech" [selected]="'B-Tech' == student.student_branch">ZMS</option>
                                  </select>                               
                            </div>                   
                  </div>  
                  <div [hidden]="!isupdated">
                      <h4>Student Detail Updated!</h4>
                  </div>        
                    
            </div>
            
            <!-- Modal footer -->
            <div class="modal-footer" >
              <button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>
              <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button>
            </div>
            
        </form>
          </div>
        </div>
      </div>

许可证生成器

&时代；
许可证已删除
客户ID
硬件密钥
产品
许可证密钥
行动
33333
22222
基础知识
fxLBJ0BF5b+CLBCW9xamqsCgP0AyVIVpCCiYGI3WfEOAPPB7nVgHipERQmv2wVJYQI9PwfpS+4qP5owl4eDfI/f42cbu+SBTty3Sk/SGZZFON1XUNDFZZQB7YR7ATNSV22WBV/LWC4ZW0KGR44TNM8AW5UQF9/WmuKeM/DFKIDNIW6KMD9J5J5ADKWKWFG==
删除
更新
复制许可证密钥


最大MSAN
最大用户
10000
10000


更新学生
学名
学生电子邮件
学生支部
ZMS
学生资料更新！
更新
接近

---

CSS文件中没有任何内容。如果我试图使所有列保持相同，那么我将丢失搜索字段和条目数数据。我从一个网站上获得了一个Spring Boot项目的帮助，并得到了这个，但无法完成。请帮忙。坚持了几个小时。

尝试添加

空白：nowrap

到所有的

td

，我认为它应该解决这个问题 这就是nowrap所做的：

空格序列将折叠为单个空格。正文 永远不会换行到下一行。正文继续在同一行上 直到遇到
标记。从w3school获取

---

我是将其添加到CSV文件中，然后添加asa类还是直接工作？在css中，您可以通过双向内联样式效果直接添加内容，并且它具有最高优先级（id和类越多），或者是我从css类中认为的更好的方式。您可以直接将其添加到行中，但最好给出一个类，然后在CSS文件中进行编辑，这样，如果您需要在其他地方使用is，您就可以了