Помощь в верстке таблицы highcharts

124

13 июня 2021, 01:00

Есть страница esportsplayer.ru

В ней есть блок, который не как не получается ровно сверстать. Нужна помощь. Заранее спасибо. Тот самый блок

code

<div class="teams_stats clearfix gh6"><div class="teams_bars ts2"><div class="tbsb"><table class="intable"><tbody><tr><td> <span class="red"><br> 80%<br> </span></td><td align="center" class="tip" title="Сколько золота (от максимально возможного) забирают с центра"> Центральная линия</td><td> <span class="green"><br> 82%<br> </span></td></tr><tr><td> <span class="green"><br> 94%<br> </span></td><td align="center" class="tip" title="Сколько золота (от максимально возможного) забирают с легкой линии"> Легкая линия</td><td> <span class="red"><br> 68%<br> </span></td></tr><tr><td> <span class="green"><br> 85%<br> </span></td><td align="center" class="tip" title="Сколько золота (от максимально возможного) забирают со сложной линии"> Сложная линия</td><td> <span class="red"><br> 62%<br> </span></td></tr><tr><td> <span class="red"><br> 11%<br> </span></td><td align="center" class="tip" title="Сколько золота (от максимально возможного) забирают из леса"> Лес</td><td> <span class="green"><br> 27%<br> </span></td></tr><tr><td> <span class="green"><br> <a href="/ru/dota-2/matches?t1=6177"><br> 3<br> </a><br> </span></td><td align="center" class="tip" title="Число выигранных матчей в личных встречах за последний год"> <a href="/ru/dota-2/matches?t1=6177&amp;t2=49"><br> История личных встреч<br> </a></td><td> <span class="red"><br> <a href="/ru/dota-2/matches?t1=49"><br> 1<br> </a><br> </span></td></tr><tr><td> <span class="green"><br> <a href="/ru/dota-2/matches?t1=6177"><br> 5<br> </a><br> </span></td><td align="center" class="tip" title="Сколько из 5 последних матчей выиграли"> Последние 5 матчей</td><td> <span class="red"><br> <a href="/ru/dota-2/matches?t1=49"><br> 4<br> </a><br> </span></td></tr></tbody></table><div class="tcgraf" data-1="[80,94,85,11,3,5]" data-2="[82,68,62,27,1,4]" id="teams_compare" data-highcharts-chart="5"><div id="highcharts-10" class="highcharts-container " style="position: relative; overflow: hidden; width: 568px; height: 413px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Roboto, sans-serif;"><svg version="1.1" class="highcharts-root" style="font-family:'Roboto', sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="568" viewBox="0 0 568 413" height="413"><desc>Created with Highcharts 5.0.2</desc><defs><clipPath id="highcharts-11"><rect x="0" y="0" width="403" height="568" fill="none"></rect></clipPath></defs><rect fill="none" class="highcharts-background" x="0" y="0" width="568" height="413" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="0" y="5" width="568" height="403"></rect><g class="highcharts-grid highcharts-xaxis-grid "><path fill="none" class="highcharts-grid-line" d="M 0 41.5 L 568 41.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 0 107.5 L 568 107.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 0 173.5 L 568 173.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 0 240.5 L 568 240.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 0 306.5 L 568 306.5" opacity="1"></path><path fill="none" class="highcharts-grid-line" d="M 0 372.5 L 568 372.5" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid "><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M -0.5 5 L -0.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 56.5 5 L 56.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 113.5 5 L 113.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 169.5 5 L 169.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 226.5 5 L 226.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 283.5 5 L 283.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 340.5 5 L 340.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 397.5 5 L 397.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 453.5 5 L 453.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 510.5 5 L 510.5 408" opacity="1"></path><path fill="none" stroke="#364C5D" stroke-width="1" class="highcharts-grid-line" d="M 568.5 5 L 568.5 408" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" x="0" y="5" width="568" height="403"></rect><g class="highcharts-axis highcharts-xaxis "><path fill="none" class="highcharts-axis-line" d="M 0 5 L 0 408"></path></g><g class="highcharts-axis highcharts-yaxis "><path fill="none" class="highcharts-axis-line" d="M 0 408 L 568 408"></path></g><g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0 highcharts-bar-series highcharts-color-1 highcharts-tracker" transform="translate(568,408) rotate(90) scale(-1,1) scale(1 1)" width="568" height="403" clip-path="url(#highcharts-11)"><rect x="341" y="0" width="52" height="289" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect><rect x="275" y="0" width="52" height="239" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect><rect x="209" y="0" width="52" height="241" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect><rect x="143" y="0" width="52" height="405" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect><rect x="77" y="0" width="52" height="143" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect><rect x="10" y="0" width="52" height="253" fill="#d94c4c" class="highcharts-point highcharts-color-1" stroke="#ffffff" stroke-width="0"></rect></g><g class="highcharts-markers highcharts-series-0 highcharts-bar-series highcharts-color-1 " transform="translate(568,408) rotate(90) scale(-1,1) scale(1 1)" width="568" height="403" clip-path="none"></g><g class="highcharts-series highcharts-series-1 highcharts-bar-series highcharts-color-0 highcharts-tracker" transform="translate(568,408) rotate(90) scale(-1,1) scale(1 1)" width="568" height="403" clip-path="url(#highcharts-11)"><rect x="341" y="289" width="52" height="280" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect><rect x="275" y="239" width="52" height="330" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect><rect x="209" y="241" width="52" height="328" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect><rect x="143" y="405" width="52" height="164" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect><rect x="77" y="143" width="52" height="426" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect><rect x="10" y="253" width="52" height="316" fill="#3f79a2" class="highcharts-point highcharts-color-0" stroke="#ffffff" stroke-width="0"></rect></g><g class="highcharts-markers highcharts-series-1 highcharts-bar-series highcharts-color-0 " transform="translate(568,408) rotate(90) scale(-1,1) scale(1 1)" width="568" height="403" clip-path="none"></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels "></g><g class="highcharts-axis-labels highcharts-yaxis-labels "></g></svg></div></div><p></p></div><p></p></div><p></p></div>

Answer 1

Можно и без SVG.

В коде я использовал жуткую конструкцию для бэкграунда сетки из-за того, что рисунки в фон тут нельзя, а вот в base64 позволяет. Ну и цвета-шрифты-отступы подгонять не стал, важен принцип:

.t_stats { 
  font-family: 'Arial Narrow'; 
  font-size: 18px; 
  width: 500px; 
} 
 
.t_bars { 
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuNv1OCegAAAAMSURBVBhXY2BgYAAAAAQAAVzN/2kAAAAASUVORK5CYII='); 
  background-repeat: repeat-y; 
  background-position: 90px 0, 130px 0, 170px 0, 210px 0, 250px 0, 290px 0, 330px 0, 370px 0, 410px 0; 
  ; 
} 
 
.t_bars, 
.t_bar { 
  width: 100%; 
} 
 
.t_bar { 
  display: flex; 
  flex-direction: row; 
  margin-bottom: 10px; 
} 
 
.line { 
  background-color: #D94C4C; 
  color: #fff; 
  flex: 1; 
  text-align: center; 
  line-height: 1.5em; 
  position: relative; 
} 
 
.blue_chart_line { 
  background-color: #3F79A2; 
  position: absolute; 
  height: 100%; 
  top: 0; 
  left: 0; 
} 
 
.line_name { 
  position: relative; 
  z-index: 1; 
} 
 
.left_percent { 
  width: 50px; 
  text-align: right; 
  padding-right: 5px; 
} 
 
.right_percent { 
  width: 50px; 
  text-align: left; 
  padding-left: 5px; 
} 
 
.red { 
  color: #800; 
} 
 
.green { 
  color: #080; 
}

<div class="t_stats"> 
  <div class="t_bars"> 
 
    <div class="t_bar"> 
      <div class="left_percent red">8%</div> 
      <div class="line"> 
        <div class="blue_chart_line" style="right:63%;"></div> 
        <div class="line_name">Центральная линия</div> 
      </div> 
      <div class="right_percent green">100%</div> 
    </div> 
 
    <div class="t_bar"> 
 
      <div class="left_percent green">94%</div> 
      <div class="line"> 
        <div class="blue_chart_line" style="right:54%;"></div> 
        <div class="line_name">Легкая линия</div> 
      </div> 
      <div class="right_percent red">6%</div> 
    </div> 
 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Редирект на null после отправки формы

Отправляю форму[![введите сюда описание изображения][1]][1]

102

PHP

Коллекции объектов

Предисловие/вода

118

PHP

Фатальная ошибка Uncaught Error: Call to a member function fetch() php [дубликат]

Всем доброго времени суток, недавно начал изучать php7 по учебнику, и я столкнулся с такой проблемой (Fatal error), и не могу понять, что же я сделал...

114

PHP

Задержка выполнения php скриптов в bash

Сервер Ubuntu