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

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

0 голосов
/ 28 ноября 2018

Как лучше всего выделить ячейку в таблице, не занимая дополнительного места.Просто установить цвет фона недостаточно.(так как он должен быть светлым цветом для того, чтобы число / текст было читабельным).

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

<style>
td {
    vertical-align:top; position:relative; text-align:right;
}
.bordered { 
position: absolute;width:calc(100% + 20px)!important;left:-10px;top:-5px;border:6px rgba(255,0,0,0.7)solid;border-radius:8px;width:200%;
}
</style>
<body>
<table style="width: 100%">
    <tr>
        <td><span class="bordered">&nbsp;&nbsp;&nbsp;</span>1&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>12</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><span class="bordered">&nbsp;&nbsp;&nbsp;</span>123</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>1234</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td><span class="bordered">&nbsp;&nbsp;&nbsp;</span>123456789</td>
    </tr>
</table>

a) Может ли контур иметь закругленные углы?

b) Можно ли сделать это выше без дополнительного элемента?

c) Можно ли расположить сверху над ячейкой, а не над ячейкой?

Справочная информация: у меня есть приложение html,который производит «Список комплектации» (для оперативников, чтобы выбрать правильные продукты для Заказа. Он имеет поле «Количество», которое css подсвечивает желтым, когда оно больше, чем ОДИН (но оперативники не замечают его - и просто отправляет одно (котороеэто обычное количество). css выделяется фоном Желтый - если мы используем красный - трудно прочитать число (оно черным).

Нет проблем с кросс-браузерными операциями, поскольку оперативники просто используют Chrome внутри.

Ответы [ 4 ]

0 голосов
/ 28 ноября 2018

Относительно ответа Джули, вы можете получить лучшее из обоих миров, если примените радиус границы.Например: 

td {
  border: 0px solid transparent;
  box-shadow: 0 0 5px red;
  border-radius: 10px;
}

Сама граница невидима и не занимает места, но тень от рамки теперь будет следовать кривой потенциальной границы.Вы можете настроить параметры тени блока, чтобы сделать контур жестким или размытым.

0 голосов
/ 28 ноября 2018

Если вы не можете занять ЛЮБОЕ место, попробуйте это: 

var btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
  document.querySelectorAll('[a]').forEach(
    el => {
      el.classList.toggle('bordered');
    }
  );
});
td {
  vertical-align:top;
  text-align:right;
}

.bordered {
  position: relative;
  z-index: 1;
}

.bordered::before {
  border: 4px solid rgba(255,0,0,.5);
  border-radius: 4px;
  bottom: -2px;
  content: '';
  left: -4px;
  position: absolute;
  right: -4px;
  top: -2px;
  z-index: -1;
}
<table style="width: 100%">
  <tr>
    <td a class="bordered">&nbsp;&nbsp;&nbsp;1&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>12</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td a class="bordered">&nbsp;&nbsp;&nbsp;123</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>1234</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td a class="bordered">&nbsp;&nbsp;&nbsp123456789</td>
  </tr>
</table>

<button id="toggle">Toggle</button>

Я использую псевдоэлемент ::before, чтобы показать границу.Как и в вашем примере это position: absolute, а затем я привязываю верх, левый, правый и нижний к ячейке.

Нажмите на кнопку переключения, чтобы увидеть добавление и удаление границ.

ОБНОВЛЕНО

На основании вашего вопроса я изменил top, left, right и bottom на отрицательные числа, чтобы избежать дублирования

0 голосов
/ 28 ноября 2018

Вы можете использовать тень от рамки в качестве границы.

 .bordered { 
  box-shadow: 0 0 5px red;
}

Он не закругленный, но и не совсем квадратный.

0 голосов
/ 28 ноября 2018

Просто сделайте, чтобы ВСЕ ТД имели прозрачную границу размером 1 пиксель, а затем для выбранных установите цвет. 

td {
  border: 1px solid transparent;
  vertical-align:top;
  text-align:right;
}

.bordered { 
  border-color: red;
  border-radius: 4px;
}
<table style="width: 100%">
  <tr>
    <td class="bordered">&nbsp;&nbsp;&nbsp;1&nbsp;</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td>12</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td class="bordered">&nbsp;&nbsp;&nbsp;123</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td>1234</td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td class="bordered">&nbsp;&nbsp;&nbsp123456789</td>
  </tr>
</table>
...