Как установить индивидуальный отступ таблицы? - PullRequest
Новая
       47

Как установить индивидуальный отступ таблицы?

0 голосов
/ 04 июня 2019

Я сделал столбцы на диаграмме водопада, которые я хочу, чтобы они были похожи друг на друга. Это встроенные блоки, программно устанавливаемые по ширине и отрегулированные вбок по левому краю.

В этом случае javascript для установки innerHTML не имеет значения, но минимальные CSS и HTML, над которыми я экспериментировал, приведены ниже. Запустите эту скрипку, чтобы увидеть, как она выглядит: 

      * { padding:0; margin:0; }
      
      div { display:inline-block; }

      table {
        width:100%;
        white-space:nowrap;
        cellpadding:0;
      }

      td { border:solid 1px black; }
            
      .bar{
        margin:0;
        border:solid 1px red;
        background:yellow;
      }

      .padOnlyThisCell{
        padding:20px;
      }

      .padNotThisCell{
        padding:0;
      }
    <br>
    <table cellspacing="0">
      <tr>
        <td class='padOnlyThisCell'>
          First column
        </td>
        <td class='padNotThisCell'>
          
          <div class='bar padNotThisCell' style='margin-left:30%; width:30%'><sub> &nbsp; Why does this bar have margin? </sub></div>

          <sup> &nbsp; Why does this cell have padding?</sup>
          
        </td>
    </table>
    <br>

Существует нежелательное заполнение ячеек таблицы, несмотря на то, что padding:0 везде, но не в ячейках первого столбца, где требуется заполнение.

То, что я хочу, это полоса с верхней и нижней красной рамкой, касающейся ее окружающей черной рамки.

То же самое и в Chrome, и в Firefox: padding в первом <td> влияет на другие <td> в <tr>. Зачем? Как изменить этот код так, чтобы он не занимал место над и под строкой без потери отступов в первом столбце?

1 Ответ

0 голосов
/ 05 июня 2019

Размер внутреннего блока изменяется в соответствии с его содержимым, которое должно иметь отступ.

Измените padNotThisCell на панели на padThisCell, и оно будет работать: 

      * { padding:0; margin:0; }
      
      div { display:inline-block; }

      table {
        width:100%;
        white-space:nowrap;
        cellpadding:0;
      }

      td { border:solid 1px black; }
            
      .bar{
        margin:0;
        border:solid 1px red;
        background:yellow;
      }

      .padThisCell{
        padding:20px;
      }

      .padNotThisCell{
        padding:0;
      }
    <br>
    <table cellspacing="0">
      <tr>
        <td class='padThisCell'>
          First column
        </td>
        <td class='padNotThisCell' style='width:100%;'>
          
          <div class='bar padThisCell' style='margin-left:30%; width:30%'> Bar </div>

          
        </td>
    </table>
    <br>

Переименован padOnlyThisCell в padThisCell, потому что они теперь в двух местах. Наименование в коде влияет на количество. Переименование часто является хорошей привычкой программирования.

Заполнение первого <td> не влияет на заполнение в другом <td>! Чтобы увидеть, что я получил помощь от этого ответа : в Chrome, откройте инспектор (F12 или щелкните правой кнопкой мыши -> проверить элемент), и там вы увидите, что применяется к элементу .

Что действительно происходит, так это то, что inline-block имеет возможность сжимать границы, чтобы соответствовать его содержимому, несмотря на любые отступы или поля вокруг. Добавление той же подкладки внутри стержня, что и в первой ячейке, идеально подходит .

Чтобы быть более точным, подойдут padding-top:20px и padding-bottom:20px в .bar-правиле css (потому что я не уверен, что отступы могут ошибаться с шириной). Также добавлено style='width:100%;' во вторую ячейку, чтобы уменьшить первую ячейку.

...