Добавить фигуры сферы в углу ячеек таблицы - PullRequest
Новая
       15

Добавить фигуры сферы в углу ячеек таблицы

0 голосов
/ 24 апреля 2018

У меня есть таблица для графического представления графического интерфейса. Для некоторых ячеек таблицы в углу есть сфера. нижний колонтитул имеет символ плюс (значок шрифта-удивительный) в углу. Я попытался поместить сферу, но выровнять только внутри ячейки.

Цель для достижения на рисунке

My target output

Помогите мне решить эту проблему 

.damage-chart{
  border: 3px solid #dddddd;
  width: 80%;

}
.damage-chart td{
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
}

.damage-chart, .damage-chart td{
  border-top: none;
  border-right: none;
}
 <table class="damage-chart">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
   </table>

Ответы [ 3 ]

0 голосов
/ 24 апреля 2018

Вы можете использовать CSS-преобразования для позиционирования ваших сфер.

Знаки «Плюс» могут быть созданы псевдоэлементом ::after с content: '+'; для каждой ячейки последнейrow.

Кроме того, вы можете использовать border-collapse: collapse;, чтобы избежать пропусков между границами.И старайтесь избегать встроенных объявлений стилей, вы можете просто выбрать последнюю ячейку каждой строки с помощью селектора :last-child. 

.damage-chart {
  border: 3px solid #dddddd;
  width: 80%;
  padding: 0;
  margin-top: 20px;
  border-collapse: collapse;
}

.damage-chart td {
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
}
.damage-chart tr td:last-child {
  width: 3%;
}

.damage-chart,
.damage-chart td {
  border-top: none;
  border-right: none;
}

.sphere {
  background: #b11a5a;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-9px, 17px);
 -ms-transform: translate(-9px, 17px); /* IE 9 */
 -webkit-transform: translate(-9px, -17px); /* Safari */
}

.damage-chart tr:last-child td {
  position: relative;
}

.damage-chart tr:last-child td::after {
  content: '+';
  font-family: Arial;
  font-size: 1.5em;
  position: absolute;
  bottom: -16px;
  left: -8px;
}
<table class="damage-chart">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="sphere"></div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td><div class="sphere"></div></td>
    <td></td>
  </tr>
  <tr>
    <td><div class="sphere"></div></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
0 голосов
/ 24 апреля 2018

Таблицы имеют сложный и тонкий механизм, который помогает быстро обновлять все столбцы до одинаковой ширины / высоты по столбцам и строкам.Ну, не так быстро, если быть точным, но все же: оно есть.

Результатом этой функции является то, что элементы таблицы (<thead>, <tbody>, <tfoot>, <tr>, <td>, <th>, <col>, <colgroup> и<caption>) имеют разные реализации в разных браузерах, и вы не можете полагаться на свойства уровня блока, чтобы работать с ними надежно.Например, position:relative не работает на <tr> элементах (и есть много других «исключений», подобных этому).

Вместо того, чтобы помнить, что работает, а что нетОпределите, для каких элементов таблицы рекомендуется (и безопаснее) использовать элементы уровня блока внутри ячеек таблицы, чтобы расположить точки: 

td {
  position: relative;
  padding: 1rem;
  border: 1px solid #ddd;
}

red-ball {
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: -8px;
  left: -8px;
  border-radius: 8px;
  background-color: #900;
}
table {
  width: calc(100% - 2rem);
  border-collapse:collapse;
  margin: 1rem;
}
<table class="damage-chart" >
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
  <tr>
    <td>
      <red-ball></red-ball>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <red-ball></red-ball>
    </td>
  </tr>
</table>
0 голосов
/ 24 апреля 2018

Использование position: relative и position: absolute может решить вашу проблему.Попробуйте этот код. 

<table class="damage-chart">
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td><span class="sphere"></span></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td style="width: 3%"></td>
      </tr>
      <tr>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td><span class="plus">+</span></td>
        <td style="width: 3%"></td>
      </tr>
   </table>

.damage-chart{
  border: 3px solid #dddddd;
  width: 80%;

}
.damage-chart td{
  border: 2px solid #f3f3f3;
  height: 30px;
  width: 11%;
  position: relative;
}

.damage-chart, .damage-chart td{
  border-top: none;
  border-right: none;
}
.sphere {
  background-color: red;
  position: absolute;
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  right: -7px;
  top: -7px;
  z-index: 2;
}
.plus {
  position: absolute;
  font-weight: bold;
  display: block;
  right: -8px;
  bottom: -10px;
  z-index: 2;
}
...