CSS: Keep style by breaking the word

Question

CSS: Keep style by breaking the word

Navigation

#1 by (2 votes)

0

By breaking the word with word-wrap: break-word; I would like the border top to stay, is there a way to do it?

Thank you very much.

td{
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>

html css bootstrap

asked by Lluís Puig Ferrer 20.09.2017 в 11:29

source

1 answer

There is already an object named ##Temporal Table in the database PHP insert multiple fields to database

score 2 · Accepted Answer

To keep the edge as simple as it is to apply it to the row instead of the cells:

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>