1

Имеется стандартная html таблица с текстом. Я хочу с помощью нажатия на ячейку (или сделать в ней какую-нибудь кнопку и нажимать на нее) увеличивать текст в ячейке, или саму ячейку. Подскажите, пожалуйста, решение.

Приложение asp net mvc, фронт на js+bootstrap.

1 ответ 1

2

При наведении курсора:

.zoom {
  border-collapse: collapse;
  margin: 50px auto;
  border: 1px solid green;
}

.zoom td {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  vertical-align: top;
}

.zoom td div {
  position: absolute;
  z-index: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
  background: white;
  transition: transform .6s ease .02s, z-index .01s;
}

.zoom td div:hover {
  transform: scale(1.5);
  z-index: 1;
}
<table class="zoom">
  <tr>
    <td><div>1</div></td>
    <td><div>2</div></td>
    <td><div>3</div></td>
  </tr>
  <tr>
    <td><div>4</div></td>
    <td><div>5</div></td>
    <td><div>6</div></td>
  </tr>
  <tr>
    <td><div>7</div></td>
    <td><div>8</div></td>
    <td><div>9</div></td>
  </tr>
</table>

При удержании кнопки мыши:

.zoom {
  border-collapse: collapse;
  margin: 50px auto;
  border: 1px solid green;
}

.zoom td {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  vertical-align: top;
}

.zoom td div {
  position: absolute;
  z-index: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
  background: white;
  transition: transform .6s ease .02s, z-index .01s;
}

.zoom td div:active {
  transform: scale(1.5);
  z-index: 1;
}
<table class="zoom">
  <tr>
    <td><div>1</div></td>
    <td><div>2</div></td>
    <td><div>3</div></td>
  </tr>
  <tr>
    <td><div>4</div></td>
    <td><div>5</div></td>
    <td><div>6</div></td>
  </tr>
  <tr>
    <td><div>7</div></td>
    <td><div>8</div></td>
    <td><div>9</div></td>
  </tr>
</table>

Переключение по щелчку:

.zoom {
  border-collapse: collapse;
  margin: 50px auto;
  border: 1px solid green;
}

.zoom td {
  padding: 0;
  vertical-align: top;
}

.zoom td label {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
}

.zoom td input[name="zzz"] {
  display: none;
}

.zoom td input[name="zzz"]+div {
  position: absolute;
  z-index: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  box-sizing: border-box;
  background: white;
  transition: transform .6s ease .02s, z-index .01s;
}

.zoom td input[name="zzz"]:checked+div {
  transform: scale(1.5);
  z-index: 1;
}
<table class="zoom">
  <tr>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
  </tr>
  <tr>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
  </tr>
  <tr>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
    <td><label><input type="radio" name="zzz"><div>7</div></label></td>
  </tr>
</table>

1
  • Если в ячейке много текста, то при увеличении он выезжает за пределы границ, и часть текста не видно. Подскажите, пожалуйста, как решить эту проблему. 12 апр 2019 в 10:00

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.