Skip to main content
Modificar ejemplo para mantener el borde
Origen Enlace
Asier Villanueva
  • 14.6k
  • 2
  • 16
  • 32

Supongo que te refieres a quePara mantener el contenido del restoborde lo más sencillo es aplicárselo a la fila en lugar de a las celdas salga alineado arriba. Deberías usar vertical-align:

tdtr{
  border-top: 1px solid black;
  vertical-align: top;
}
.width1{
  width:60%;
  display:inline-block;
  word-wrap:break-word;
}
.width2{
  width:30%;
}
.width3{
  width:10%;
}
@media (max-width: 700px){
  .width1{
    width:20%;

    word-wrap:break-word;
  }
  .width2{
    width:60%;
  }
  .width3{
    width:20%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<table>
  <tr class="fila1">
  <td class="width1">holaaaaaaaaaaaaaaaaaaaaa</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila2">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila3">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
 </table>

Supongo que te refieres a que el contenido del resto de las celdas salga alineado arriba. Deberías usar vertical-align:

td{
  border-top: 1px solid black;
  vertical-align: top;
}
.width1{
  width:60%;
  display:inline-block;
  word-wrap:break-word;
}
.width2{
  width:30%;
}
.width3{
  width:10%;
}
@media (max-width: 700px){
  .width1{
    width:20%;

    word-wrap:break-word;
  }
  .width2{
    width:60%;
  }
  .width3{
    width:20%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<table>
  <tr class="fila1">
  <td class="width1">holaaaaaaaaaaaaaaaaaaaaa</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila2">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila3">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
 </table>

Para mantener el borde lo más sencillo es aplicárselo a la fila en lugar de a las celdas:

tr{
  border-top: 1px solid black;
}
.width1{
  width:60%;
  display:inline-block;
  word-wrap:break-word;
}
.width2{
  width:30%;
}
.width3{
  width:10%;
}
@media (max-width: 700px){
  .width1{
    width:20%;

    word-wrap:break-word;
  }
  .width2{
    width:60%;
  }
  .width3{
    width:20%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<table>
  <tr class="fila1">
  <td class="width1">holaaaaaaaaaaaaaaaaaaaaa</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila2">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila3">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
 </table>

Origen Enlace
Asier Villanueva
  • 14.6k
  • 2
  • 16
  • 32

Supongo que te refieres a que el contenido del resto de las celdas salga alineado arriba. Deberías usar vertical-align:

td{
  border-top: 1px solid black;
  vertical-align: top;
}
.width1{
  width:60%;
  display:inline-block;
  word-wrap:break-word;
}
.width2{
  width:30%;
}
.width3{
  width:10%;
}
@media (max-width: 700px){
  .width1{
    width:20%;

    word-wrap:break-word;
  }
  .width2{
    width:60%;
  }
  .width3{
    width:20%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<table>
  <tr class="fila1">
  <td class="width1">holaaaaaaaaaaaaaaaaaaaaa</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila2">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
  <tr class="fila3">
  <td class="width1">1</td>
  <td class="width2">2</td>
  <td class="width3">3</td>
  </tr>
 </table>