Пропорциональное масштабирование высоты и ширины таблицы HTML

Question 1

У меня есть таблица HTML с одной ячейкой. Таблица расширяется в соответствии с содержимым ячейки.

Моя проблема в том, что я хочу, чтобы таблица сохраняла квадратный размер, так что если ширина масштабируется, высота будет пропорционально масштабироваться. Мне нужна такая же функциональность, как масштабирование изображения, даже если содержимое является текстом.

html css

0

user1615362 26 Мар 2013 в 18:59

2

Думаю, для этого вам понадобится javascript ...

–

Johan

26 Мар 2013 в 19:02

Поскольку определенные свойства CSS применяются только к определенным объектам ... какой тип содержимого будет в ячейке / таблице?

–

Christopher J Smith

26 Мар 2013 в 19:11

Обычный текст

–

user1615362

26 Мар 2013 в 19:12

Answer

Вот пример

<body onLoad="tableSquare('table1');">
  <table class="square" id="table1" >
    <tr>
      <td>lalalalalallc sald;asd;l</td>
      <td>gf sdfgds gdsf gdsfg dfg dfg</td>
      <td>dfg dfgdf gxcvxcvxcvxcvxcvxcvxc jhkvxcvxcvdfgdfgdf gdfg</td>
    </tr>
    <tr>
      <td>dfg dfgdfg dfgdfg</td>
      <td>dfg dfgdf </td>
      <td></td>
    </tr>
  </table>
</body>

Стиль

.square{
  background-color:#cfcfcf;
  width:100px;
  height:100px;
}

Функция Javascript

function tableSquare(tableName){
  var t = document.getElementById(tableName);
  var max_size = Math.max(t.offsetWidth,t.offsetHeight);
  t.style.width = max_size+"px";
  t.style.height = max_size+"px";
}

Демонстрационная страница на JSBIN http://jsbin.com/ivepak/1/edit

3

Natalia 26 Мар 2013 в 19:35

Хорошо ответила, Наталья. Я немного поигрался с этим кодом и смог восстановить автоматическое изменение размера, добавив команды t.style.width="100%"; t.style.height="100%"; непосредственно перед строкой с вызовом Math.max ().

–

Christopher J Smith

26 Мар 2013 в 20:02

Question 2

Вот пример

<body onLoad="tableSquare('table1');">
  <table class="square" id="table1" >
    <tr>
      <td>lalalalalallc sald;asd;l</td>
      <td>gf sdfgds gdsf gdsfg dfg dfg</td>
      <td>dfg dfgdf gxcvxcvxcvxcvxcvxcvxc jhkvxcvxcvdfgdfgdf gdfg</td>
    </tr>
    <tr>
      <td>dfg dfgdfg dfgdfg</td>
      <td>dfg dfgdf </td>
      <td></td>
    </tr>
  </table>
</body>

Стиль

.square{
  background-color:#cfcfcf;
  width:100px;
  height:100px;
}

Функция Javascript

function tableSquare(tableName){
  var t = document.getElementById(tableName);
  var max_size = Math.max(t.offsetWidth,t.offsetHeight);
  t.style.width = max_size+"px";
  t.style.height = max_size+"px";
}

Демонстрационная страница на JSBIN http://jsbin.com/ivepak/1/edit

3

Natalia 26 Мар 2013 в 19:35

Хорошо ответила, Наталья. Я немного поигрался с этим кодом и смог восстановить автоматическое изменение размера, добавив команды t.style.width="100%"; t.style.height="100%"; непосредственно перед строкой с вызовом Math.max ().

–

Christopher J Smith

26 Мар 2013 в 20:02

Пропорциональное масштабирование высоты и ширины таблицы HTML

1 ответ

Похожие вопросы

Новые вопросы

html