Унаследовать высоту столбца от другого столбца в таблице

html css html-table

84 просмотра

1 ответ

1 Репутация автора

Надеюсь, кто-то может помочь с моей проблемой. Я пытаюсь создать таблицу с 3 столбцами.

  • ЛЕВЫЙ ТД - это логотип.
  • Средний TD - это текст, и я хочу, чтобы эта ячейка изменяла свой размер (как обычно) в зависимости от того, какой там текст, поэтому я не могу установить определенную высоту для этой ячейки, так как содержимое будет различным для каждой строки.
  • ПРАВАЯ ТД имеет divвнутреннюю часть, и divона настроена на прокрутку с высотой 100% от ТД. У меня будет несколько строк в таблице, в приведенном ниже примере у меня есть только одна для «управления проектами», однако у меня будут и другие строки, описывающие другие должности.

Я бы хотел, чтобы ПРАВЫЙ ТД наследовал высоту СРЕДНЕГО ТД, так что независимо от того, что я поместил в среднюю ячейку, правый столбец будет той же высотой и, следовательно div, также будет этой высотой. Все внутри того, divчто простирается за пределы этой высоты, будет прокручиваться.

Ограничения: я использую вики-систему управления контентом, которая НЕ будет разрешать какие-либо теги STYLE (разрешать только встроенные), а также никакие или встроенные сценарии, такие как onload="dothis()". Я просмотрел существующие вопросы, и, похоже, нет ответов, соответствующих моим требованиям.

Код попытался:

<table dir="ltr" style="width: 950px; border: 0px;">
  <tbody>
    <tr>
      <td style="width: 75px;">&nbsp;</td>
      <td style="width: 575px; text-align: left;">Project Management</td>
      <td><strong>here are some names to contact:</strong>
      </td>
    </tr>
    <tr>
      <td style="width: 75px; text-align: center; vertical-align: center;">LOGO</td>
      <td style="width: 575px; text-align: left; vertical-align: top;">
        <p dir="ltr">Project Management</p>
        <p dir="ltr">a project manager will do many things, including:</p>
        <p dir="ltr">this</p>
        <p dir="ltr">that</p>
        <p dir="ltr">and</p>
        <p dir="ltr">the other</p>
        <p dir="ltr">and don't forget this</p>
        <p dir="ltr">last but not least ,they'll also do:</p>
        <p dir="ltr">this as well</p>
      </td>
      <td style="width: 300px; text-align;left;vertical;align: top;;">
        <div style="height: 100%; overflow-y: scroll;">testing
          <br />testing
          <br />testing
          <br />testing
          <br />testing
          <br />testing
          <br />testing

          <br />testing
          <br />testing
          <br />testing
          <br />testing
          <br />testing

          <br />testing
          <br />testing
          <br />testing
          <br />testing
          <br />testing

          <br />testing
          <BR>oh look at meee I'm not resizing</div>
      </td>
    </tr>
  </tbody>
</table>

Автор: Ben Источник Размещён: 18.07.2016 02:34

Ответы (1)


0 плюса

693 Репутация автора

Вы не должны определенно не использовать таблицы для разметки. Используйте семантический HTML. Для отображения содержимого друг под другом вы можете использовать плавающие div. Также вы должны удалить встроенный CSS и использовать файл таблицы стилей. Посмотрите на этот пример здесь:

<style>
    .content {
          overflow: hidden;
    }

    .box {
          box-sizing: border-box;
          width: 45%;
          padding: 2.5%;
          float: left;
    }
    .box.logo {
          width: 10%;
    }
</style>
<div class="content">
<div class="box logo">
  LOGO
</div>

<div class="box">
  <p dir="ltr">Project Management</p>
  <p dir="ltr">a project manager will do many things, including:</p>
  <p dir="ltr">this</p>
  <p dir="ltr">that</p>
  <p dir="ltr">and</p>
  <p dir="ltr">the other</p>
  <p dir="ltr">and don't forget this</p>
  <p dir="ltr">last but not least ,they'll also do:</p>
  <p dir="ltr">this as well</p>
</div>

<div class="box">
  Project Management<br />
  <strong>here are some names to contact:</strong>
  <div style="height: 300px; overflow-y: scroll;">testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing

    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing

    <br />testing
    <br />testing
    <br />testing
    <br />testing
    <br />testing

    <br />testing
    <br />oh look at meee I'm not resizing</div>
</div>

Автор: Simon Kraus Размещён: 18.07.2016 03:06
Вопросы из категории :
32x32