диаграмма данных iframe в таблицах HTML - слишком много заполнения? - PullRequest
0 голосов
/ 31 марта 2020

Я работаю над таблицей HTML и встраиваю диаграмму everviz в один раздел таблицы, но когда я это делаю, высота строки увеличивается, и кажется, что вокруг всей диаграммы есть отступы. Мне просто нужно, чтобы она заполнила область, с небольшим или нулевым пробелом вокруг нее.

Вот код для вставки из everviz: <iframe class="highcharts-iframe" src="https://app.everviz.com/embed/dJlPKcAVf/" width: 100%;"></iframe>

Вот инъекционный код из everviz: <div id="highcharts-dJlPKcAVf"><script src="https://app.everviz.com/inject/dJlPKcAVf/" defer="defer"></script></div>

Вот таблица HTML, которую я использую:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-wman{border-color:#a6a6a6;text-align:center;vertical-align:middle}
.tg .tg-osf7{font-size:18px;background-color:#d0e5f7;color:#000000;border-color:#a6a6a6;text-align:center;vertical-align:middle}
.tg .tg-uasu{font-size:26px;border-color:#a6a6a6;color:#000000;text-align:center;vertical-align:top}
.tg .tg-0hel{font-weight:bold;font-size:18px;background-color:#dfebf5;color:#000000;border-color:#a6a6a6;text-align:left;vertical-align:middle}
.tg .tg-t31z{background-color:#e9e9e9;border-color:#a6a6a6;color:#000000;text-align:center;vertical-align:middle}
.tg .tg-9234{background-color:#e9e9e9;font-style:italic;border-color:#a6a6a6;color:#000000;text-align:center;vertical-align:middle}
.tg .tg-j1wb{font-size:26px;background-color:#f09e88;border-color:#a6a6a6;color:#000000;text-align:center;vertical-align:top}
.tg .tg-wo29{border-color:#a6a6a6;color:#000000;text-align:left;vertical-align:top}
</style>
<table class="tg">
  <tr>
    <th class="tg-0hel" colspan="7">Increase in Graduation Rates on Annual Basis</th>
    <th class="tg-osf7" colspan="3">Academic KPI #1</th>
  </tr>
  <tr>
    <td class="tg-t31z" colspan="3">Class of 2019</td>
    <td class="tg-9234" rowspan="2">Class of <br>2020 Target</td>
    <td class="tg-t31z" colspan="3">Three Year Trend</td>
    <td class="tg-t31z" colspan="3">Trendline with Next Years Target</td>
  </tr>
  <tr>
    <td class="tg-t31z">Performance</td>
    <td class="tg-t31z">Target</td>
    <td class="tg-t31z">Target Met?</td>
    <td class="tg-t31z">Class of 2017</td>
    <td class="tg-t31z">Class of 2018</td>
    <td class="tg-t31z">Class of 2018</td>
    <td class="tg-wman" colspan="3" rowspan="2" padding="0"><iframe class="highcharts-iframe" src="https://app.everviz.com/embed/dJlPKcAVf/" width: 100%;"></iframe></td>
  </tr>
  <tr>
    <td class="tg-uasu">86%</td>
    <td class="tg-uasu">87%</td>
    <td class="tg-j1wb">No</td>
    <td class="tg-uasu">89%</td>
    <td class="tg-uasu">84%</td>
    <td class="tg-uasu">84%</td>
    <td class="tg-uasu">86%</td>
  </tr>
  <tr>
    <td class="tg-wo29" colspan="10">More information in this space.  Possible an accordion drop down.<br>More information in this space.  Possible an accordion drop down.<br><br>More information in this space.  Possible an accordion drop down.<br><br>More information in this space.  Possible an accordion drop down.<br><br><br>More information in this space.  Possible an accordion drop down.<br><br><br>More information in this space.  Possible an accordion drop down.<br><br><br>More information in this space.  Possible an accordion drop down.<br><br><br>More information in this space.  Possible an accordion drop down.<br><br><br>More information in this space.  Possible an accordion drop down.<br><br><br></td>
  </tr>
</table>

Вот как это выглядит на сайте в настоящее время: http://www.wcsddata.net/kpi/

Любая помощь приветствуется! Большое, большое спасибо заранее!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...