Данные перекрываются из исходного контейнера

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

Пожалуйста, попробуйте добавить максимальную ширину в таблицу.

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

Вы можете найти здесь фрагмент, где я также удалил отступ для элемента div с подробной информацией о классе: https://jsfiddle.net/b4zw9ch5/

Answer 2

Вы можете перезаписать стиль клиента, используя !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 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

Я думаю, что это будет работать ...

div { z-индекс: 1; // любое целочисленное значение }