Responsive resizing of th td cells

Question

Responsive resizing of th td cells

Navigation

#1 by (0 votes)

1

How to adjust the size of cells so that 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 you end up exceeding the div border and%endsthatone(alwaysthefirst)alwaysendsupbiggerthantheothers.

<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

asked by anonymous 01.06.2018 / 04:54

1 answer

Web Crawler with Django view.py Function is not called on mobile device [closed]

score 0 · Accepted Answer

First you're using an invalid value in the color background-color: #60606048; .

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

To resolve this, user the word-break: break-all; property, so the text will "wrap" down when the column width 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>