Responsive cell resizing <th> <td>

Asked

Viewed 51 times

1

How to adjust the size of cells so they are responsive?

<body>

    <div class="corpo">
        <main class="tabela">
            <table>
                <tr>

                    <th class="t">SEGUNDA</th>
                    <th class="t">TERÇA</th>
                    <th class="t">QUARTA</th>
                    <th class="t">QUINTA</th>
                    <th class="t">SEXTA</th>
                    <th class="t">SABADO</th>
                    <th class="t">DOMINGO</th>
                </tr>

                <tr>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>

                </tr>
            </table>
        </main>
    </div>
</body>

With px end up exceeding the limit of div, inserir a descrição da imagem aqui and % ends that one (always the first) always ends up bigger than the others. inserir a descrição da imagem aqui

<style>
    .corpo {
        width: 90%;
        background-color: #60606048;
        margin: auto;

    }

    tr{
        border: 1px solid #606060;
        width: 90%;
        text-align: center;
        margin-left: 10%;

    }
    .t{
        background-color: aquamarine;
        width: 15%;
    }
</style>
html css

1 answer

0


First you are using an invalid color value background-color: #60606048;.

Second is that your table is responsive, but at a certain width where the text within the th are larger than the column width and the text will not "break".

To resolve this, use the property word-break: break-all;, so the text will "break" down when the width of the column is less than the width of the text:

.corpo {
  width: 90%;
  background-color: red;
  margin: auto;

}

tr{
  border: 1px solid #606060;
  width: 90%;
  text-align: center;
  margin-left: 10%;
  word-break: break-all;
}
.t{
  background-color: aquamarine;
  width: 15%;
}
<div class="corpo">
  <main class="tabela">
      <table>
          <tr>

              <th class="t">SEGUNDA</th>
              <th class="t">TERÇA</th>
              <th class="t">QUARTA</th>
              <th class="t">QUINTA</th>
              <th class="t">SEXTA</th>
              <th class="t">SABADO</th>
              <th class="t">DOMINGO</th>
          </tr>

          <tr>
              <td>a</td>
              <td>a</td>
              <td>a</td>
              <td>a</td>
              <td>a</td>
              <td>a</td>
              <td>a</td>

          </tr>
      </table>
  </main>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.