HTML调整表格宽度没有任何效果

Question

我试着做一个有5列的条纹。

列大小应为

10%宽度- 10%宽度- 40%宽度- 20%宽度- 20%宽度

目前这是我的代码，但是表格没有调整到我想要的宽度( 'description‘看起来不像宽度= 40%)

​

​

有没有人能建议一下这里出了什么问题？

下面是我的代码：

​

 <div class="row">
            <div class="col-md-12">
              <div class="panel panel2">
                  <div class="table-responsive">
                   
                   
                    <table id="dtBasicExample" class="table table-striped table-bordered" cellspacing="0" width: auto !important;  >
                   
                   
                      <thead>
                        <tr>
                          <th width="10%">ID
                          </th>
                          <th width="10%">File
                          </th>
                          <th width="40%">Description
                          </th>
                          <th width="20%">Date</th>
                          <th width="20%">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        <?php  
                        $data = mysqli_query($sql_con,"SELECT * FROM noticeboard");
                        while ($row = mysqli_fetch_array($data)) {
                         ?>
                        <tr>
                          <td style="width:10%;"><?php echo $row['id']; ?></td>
                          <td>
                          <?php 
                          $file = $row['file'];

                          $filetype = strtolower(pathinfo($file,PATHINFO_EXTENSION));
                            if ($filetype =="jpg" || $filetype =="png" || $filetype =="jpeg") {
                                echo "<a href = '$file' target='_blank'><i class='far fa-file-image file-icons' style='font-size:50px; color: #333'></i></a>";
                            }
                            else if($filetype =="docx" || $filetype =="doc"){
                              echo "<a href = '$file' target='_blank'><i class='far fa-file-word file-icons' style='font-size:50px; color: #333'></i></a>";
                            }
                            else{
                              echo "<a href = '$file' target='_blank'><i class='far fa-file-pdf file-icons' style='font-size:50px; color: #333'></i></a>"; 
                            }
                          ?>  
                          </td>
                          <td><span><?php echo $row['notice_desc']; ?></span></td>
                          <td><?php echo $row['ndatetime']; ?></td>
                          <td>
                            <a href="update_noticeboard.php?value=<?php echo $row['id'] ?>" class="btn btn-outline-primary btn-rounded"><i class="fa fa-edit"></i></a>
                            <a href="" class="btn btn-outline-danger btn-rounded" data-toggle = "modal" data-target= "#exampleModaldep<?php echo $row['id'];?>"><i class="fa fa-trash"></i></a>

                            <!-- MODEL -->
                          <div class="modal fade" id="exampleModaldep<?php echo $row['id'];?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <div class="modal-dialog" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Delete File</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">
                                Do you really want to delete this file?
                              </div>
                              <div class="modal-footer">
                                <a href="delete_noticeboard.php?value=<?php echo $row['id'] ?>" class="btn btn-outline-primary btn-rounded">YES</a>
                                <button type="button" class="btn btn-outline-danger btn-rounded" data-dismiss="modal">NO</button>
                              </div>
                            </div>
                          </div>
                        </div>
                          </td>
                        </tr>
                        <?php } ?>
                      </tbody>
                    </table>
          </div>
        </div>
      </div>
    </div>
        <!-- content-wrapper ends -->

​

Answer 1

一些需要检查的事情(在我看来，从最不可能到最不可能)：

列中的行不会中断，导致列一直延伸到行尾(您是否设置了cells/paragraphs/rows/columns?)

• The视区中的

1. white-space: nowrap;延伸到屏幕之外。这似乎不太可能，因为其他列“看起来”大小正确(您是否在表或更高级别上设置了宽度属性？)
2. 一些css样式阻止第三列应用宽度(您是否设置了任何关于列宽度的css规则，如n-th child of nth last-of-type？)可能是media规则？)
3. 一些javascript规则正在页面加载、超时或其他操作(例如，单击、更改)上应用样式

我相信您的问题是第一个问题，因为线条没有在您提供的图像中中断。然而，如果没有看到完整的代码，人们只能进行猜测。