Блог

Главная - Вопросы по программированию - Увеличить ширину div до ширины дочерней таблицы, которая содержит много строк и вызывает вертикальную прокрутку

Увеличить ширину div до ширины дочерней таблицы, которая содержит много строк и вызывает вертикальную прокрутку

#html #css

#HTML #css

Вопрос:

У меня есть таблица, в которой много столбцов и, следовательно, она вызывает вертикальную прокрутку. Как мне расширить div-родственную таблицу таблицы на всю ширину этой таблицы.

<html xmlns="http://www.w3.org/1999/xhtml " xml:lang="en" lang="en">
<тело>
 <div style='background: green'> 
 foobarbaz
 </div>
 <таблица>
 <tr>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbazbaz</td>
 </tr>
 </таблица>
</body>
</html>

Как вы увидите здесь, ширина div равна только ширине основного текста. Мне нужно, чтобы ширина div соответствовала ширине переполненной таблицы.

Спасибо

Комментарии:

1. Не хотите ли вы сказать «столбцы» вместо «строк» и «горизонтальный» вместо «вертикальный»?

2. Да, спасибо, столбцы, а не строки. Обновлено

3. Горизонтальная — слева направо, вертикальная — сверху вниз.

Ответ №1:

Вы можете обернуть оба div и table в другое div и придать этому div либо float: left , либо display: inline-block :

 <div style="float: left">
  <div style='background: green'> foobarbaz </div>
  <table>
    ..
  </table>
</div>

Ваш исходный код: http://jsfiddle.net/9yKPT /
Исправлено с помощью float: left : http://jsfiddle.net/9yKPT/1 /
Исправлено с помощью display: inline-block : http://jsfiddle.net/9yKPT/2 /

Ответ №2:

css: добавьте идентификатор в div и в таблицу, затем выполните :

 var w = setInterval(function() {
   var $div = document.getElementById("divID").style.width;
   document.getElementById("tableID").style.width = $div;
},1);