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

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
  <div style='background: green'>
    foobarbaz
  </div>
  <table>
    <tr>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
      <td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
    </tr>
  </table>
</body>
</html>

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

Спасибо

Ответы [ 2 ]

5 голосов
/ 28 апреля 2011

Вы можете обернуть и 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/

0 голосов
/ 28 апреля 2011

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

var w = setInterval(function() {
   var $div = document.getElementById("divID").style.width;
   document.getElementById("tableID").style.width = $div;
},1);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...