如何修复此表答案

【问题标题】：How to fix This table如何修复此表
【发布时间】：2022-01-11 16:36:17
【问题描述】：

我对网络编程非常陌生，我正在使用 Laravel、html、CSS、bootsrap 进行电子商务。我该如何解决这个问题。我想在描述列中添加超过 200 个字符的长描述。但不是这样，我想修复它，自动将高度添加到 td。请帮忙..

你知道参考任何与此相关的材料吗？请评论他们。谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Products Manage</title>
    <!-- Admin pannel css -->
    @include('admin.admin_css')
    <!-- end of including Admin pannel css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <style type="text/css">
        td{
            column-width: 100px;
            
        }

    </style>
</head>
<body>

    <!-- Admin pannel navbar & sidebar -->
    @include('admin.admin_sidebar')
    @include('admin.admin_navbar')
    <!-- End of Admin pannel navbar & sidebar -->

    <div class="container-fluid page-body-wrapper">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1 class="m-2" align="center">Product Manage Section</h1>
                    <table class="table table-dark">
                        <thead>
                            <tr>
                            <th scope="col">ID</th>
                            <th scope="col">Product Name</th>
                            <th scope="col">Type</th>
                            <th scope="col">Lighning</th>
                            <th scope="col">Maintanince</th>
                            <th scope="col">Size</th>
                            <th scope="col">Price</th>
                            <th scope="col">Quentity</th>
                            <th scope="col">Description</th>
                            <th scope="col">Image</th>
                            <th scope="col"class="text-center">Manage</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $items)
                                <tr>
                                <th scope="row">{{$items->id}}</th>
                                <td>{{$items->Name}}</td>
                                <td>{{$items->Type}}</td>
                                <td>{{$items->Lightning}}</td>
                                <td>{{$items->Maintaince}}</td>
                                <td>{{$items->Size}}</td>
                                <td>{{$items->Price}}</td>
                                <td>{{$items->Quentity}}</td>
                                <td>{{$items->Description}}</td>
                                <td><img src="/itemimage/{{$items->Image}}" alt="{{$items->imagename}}"></td>
                                <td colspan="2">
                                <a hfref=""class="btn btn-warning ml-2">Update</a>
                                <a hfref=""class="btn btn-danger ml-2">Delete Item</a>
                                </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： html css sql

【解决方案1】：

你可以给class单独的所有td列

td{
     width: 100px;
  }

【讨论】：

【解决方案2】：

你可以试试这个：

td{
      column-width: 100px;
      overflow:auto;
  }

【讨论】：