html - 如何确保从数据库传送的内容不会导致我的表格高度增加超过一定高度？

Question

我希望我的管理部分在主 TableView 中有一个详细的小概要。

我将为管理员提供一个单独打开每一个的选项，因此我希望 td 高度不会随着某些字段变得文本过多而增加。

this is what is happening

i would prefer all height to be like this and hide additional text heavy fields

我已经尝试了 td 的最大高度，溢出隐藏，溢出，没有任何效果。

<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">Contact List</div>
                      <div class="card-body">
                      <table id="example" class="table table-striped table`bordered table-responsive table2" style="width:100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Image</th>
                                <th>Name</th>
                                <th>Age</th>
                                <th>Breed</th>
                                <th>Description</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tfoot>
                          <tr>
                            <th></th>
                            <th></th>
                            <th>

                            </th>
                          </tr>
                        </tfoot>
                        <tbody>
                          <?php
                            $sql = "select * from contacts";
                            $result = mysqli_query($conn, $sql);
                                    if(mysqli_num_rows($result)){
                                        while($row = mysqli_fetch_assoc($result)){
                          ?>
                          <tr>
                            <td><?php echo $row['id'] ?></td>
                            <td><img src="<?php echo $upload_dir.$row['image'] ?>" height="40"></td>
                            <td><?php echo $row['name'] ?></td>
                            <td><?php echo $row['age'] ?></td>
                            <td><?php echo $row['breed'] ?></td>
                            <td><?php echo $row['description'] ?></td>
                            <td class="text-center">
                              <a href="show.php?id=<?php echo $row['id'] ?>" class="btn btn-success"><i class="fa fa-eye"></i></a>
                              <a href="edit.php?id=<?php echo $row['id'] ?>" class="btn btn-info"><i class="fa fa-user-edit"></i></a>
                              <a href="index.php?delete=<?php echo $row['id'] ?>" class="btn btn-danger" onclick="return confirm('Are you sure to delete this record?')"><i class="fa fa-trash-alt"></i></a>
                            </td>
                          </tr>
                          <?php
                              }
                            }
                          ?>
                        </tbody>
                      </table>
                    </div>
                </div>
            </div>
        </div>
   </div>

Answer 1

我认为这是 CSS white-space、overflow 和 text-overflow 的组合。

https://www.w3schools.com/cssref/pr_text_white-space.asp

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

https://www.w3schools.com/cssref/pr_pos_overflow.asp

white-space 属性将允许您预先格式化任何文本，无论您是在代码中还是在数据库本身中执行此操作，text-overflow 都将允许您可以设置溢出的表示方式(如果有的话)，overflow 将允许您隐藏多余的文本。

所以，像这样的东西。

.hideText {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

然后按照与图像单元格相同的方式为 description 字段设置类。

<td class="hideText"><?php echo $row['description'] ?></td>

您还需要设置单元格/列的宽度，我假设您知道该怎么做或者可以弄清楚。仅供引用，我会把它放在另一个类中而不是使用 style。类使它更容易复制并保存在单个文件/位置中，而不是散布在所有页面中的 style。我知道我多年来一直反对 CSS 类，但我最终发现创建自己的类比它们烦人更有帮助。

希望对您有所帮助!