Question

我在显示一些数据时遇到问题-由于客户端设置了宽度，该数据溢出了。以下是来自管理面板的内容：

<div class="content-block">                   
  <div class="college-details">                 
    <div class="media-right">
      <div class="detail" style="padding:15px">
        <p>
        
        <!-- <?php echo $data->about;?> -->
        <table style="width:1391pt" border="1" cellspacing="0">
          <tbody>
            <tr>
              <td style="height: 259.2pt; vertical-align: bottom; white-space: normal; width: 1381pt;">From the CEO and Provost<br /> 
                welcome to our University<br /> <br /> Universities are powerful institutions; they play a key role in our 
                driving economic and social development through both the provision of education and through the process of research, innovation and knowledge transfer.
              </td>
            </tr>
          </tbody>
        </table>
        
        </p>
    </div>
    <br>
  </div>
</div>
</div>

您能告诉我如何在CSS中解决此问题吗？

Answer 1

您可以使用!important以样式表中的宽度覆盖客户端样式。示例：

.detail table {
  width: 300px !important;
}

<div class="content-block">                   
  <div class="college-details">                 
    <div class="media-right">
      <div class="detail" style="padding:15px">
        <p>
        
        <!-- <?php echo $data->about;?> -->
        <table style="width:1391pt" border="1" cellspacing="0">
          <tbody>
            <tr>
              <td style="height: 259.2pt; vertical-align: bottom; white-space: normal; width: 1381pt;">From the CEO and Provost<br /> 
                welcome to our University<br /> <br /> Universities are powerful institutions; they play a key role in our 
                driving economic and social development through both the provision of education and through the process of research, innovation and knowledge transfer.
              </td>
            </tr>
          </tbody>
        </table>
        
        </p>
    </div>
    <br>
  </div>
</div>
</div>

Answer 2

我认为这会起作用...

div { z索引：1； //任何整数值 }

Answer 3

看看下面的代码片段。我不确定您将div类设置为detail的宽度。我设置了overflow-x: scroll，当内部内容超出父元素的宽度时添加了一个滚动。希望这会有所帮助。

div.detail {
  width: 250px;
  overflow-x: scroll;
}

<div class="content-block">
  <div class="college-details">
    <div class="media-right">
      <div class="detail" style="padding:15px">
        <p>
          <table style="width:1391pt" border="1" cellspacing="0">
            <tbody>
              <tr>
                <td style="height: 259.2pt; vertical-align: bottom; white-space: normal; width: 1381pt;">From the CEO and Provost<br /> welcome to our University<br /> <br /> Universities are powerful institutions; they play a key role in our driving economic and social development through both the provision of education and through the process
                  of research, innovation and knowledge transfer.
                </td>
              </tr>
            </tbody>
          </table>
        </p>
      </div>
      <br>
    </div>
  </div>
</div>

Answer 4

请尝试在表格中添加最大宽度

    .detail table {
       max-width: 100vw; 
    }

您可以在此处找到该代码段，在该代码段中，我还删除了带有类详细信息的div的填充：https://jsfiddle.net/b4zw9ch5/

数据与原始容器重叠

4 个答案: