1

Tengo el siguiente código y al hacer clic en un texto que esta recortado se expande la casilla donde se encuentra, pero no consigo como hacer que toda la fila también se extienda junto con esa, algo así como modificar solo el css a:

input[type='checkbox']:checked + tr>td>label .content { height: auto;}

Este es el código del problema:

.content{
    height:15px;
    overflow:hidden;
    text-overflow:ellipsis
}

input[type='checkbox'] { visibility: hidden; position: absolute; }

input[type='checkbox']:checked + .content { height: auto;}
<table>

<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>

<tr>
    <td>
    <label>
    <input type="checkbox" /><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line</span>
        </div></label>
</td>
<td><label>
    <input type="checkbox" /><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
<br/>Data1,1 second line - this is a kind-of long line too
<br/>Data1,1 third line
<br/>Data1,1 fourth line</span>
        </div></label></td>
<td>Data3,1</td>
</tr>

<tr>
<td>Data1,2</td>
<td>Data2,2</td>
<td>Data3,2</td>
</tr>

<tr>
<td>Data1,3</td>
<td>Data2,3</td>
<td>Data3,3</td>
</tr>

</table>

2
  • Hola, bienvenid@ a StackOverflow en español, te sugiero hacer el recorrido de bienvenida para que tengas una mejor idea sobre el funcionamiento de la pagina y puedas dar a conocer tu pregunta de mejor manera. Saludos. Commented el 14 jun. 2018 a las 22:21
  • Con javascript seria mucho mas facil
    – alanfcm
    Commented el 14 jun. 2018 a las 22:42

1 respuesta 1

1

Tal como tienes la estructura de tu HTML hecha con TABLAS es imposible hacerlo con CSS, quizás con una estructura adecuada para ese caso se podría pero lo mas rápido es agregar un script:

$(function() {
      $("input[type='checkbox']").on("click", function() {
        if ($(this).is(":checked")) {
          $("input[type='checkbox']").attr("checked", "checked").prop("checked", "checked");
        } else {
          $("input[type='checkbox']").attr("checked", false).prop("checked", false);
        }
      })
    })
.content {
      height: 15px;
      overflow: hidden;
      text-overflow: ellipsis
    }
    
    input[type='checkbox'] {
      visibility: hidden;
      position: absolute;
    }
    
    input[type='checkbox']:checked+.content {
      height: auto;
    }
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <table>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
    <tr>
      <td>
        <label id="checkbox">
                <input type="checkbox"/><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
                    <br/>Data1,1 second line - this is a kind-of long line too
                    <br/>Data1,1 third line
                    <br/>Data1,1 fourth line</span>
                </div></label>
      </td>
      <td><label id="checkbox">
                <input type="checkbox"  aria-label="checkbox"  /><div class="content"><span class="hidden">Data1,1 first line - this is a kind-of long line
                    <br/>Data1,1 second line - this is a kind-of long line too
                    <br/>Data1,1 third line
                    <br/>Data1,1 fourth line</span>
                </div></label></td>
      <td>Data3,1</td>
    </tr>

    <tr>
      <td>Data1,2</td>
      <td>Data2,2</td>
      <td>Data3,2</td>
    </tr>

    <tr>
      <td>Data1,3</td>
      <td>Data2,3</td>
      <td>Data3,3</td>
    </tr>

  </table>
</body>

1
  • buena respuesta, aun hay esperanza en los usuarios nuevos. Commented el 14 jun. 2018 a las 23:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.