Question 207151 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make my buttons all the same size/ fill the table part no matter how much text is in them

I try to make buttons in a table that should all be the full size of their table part. but if I adjust my browser width they should also adjust to fit the text. the problem is, that some buttons grow larger than others due to the text being longer. I want that the other buttons adjust their size to the biggest one of them. how can I fix this?

.essenskarte {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.essenskarte button {
  color: rgb(255, 255, 255);
  background-color: coral;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  display: block;
  border-radius: 10px;
  border: 4px double #cccccc;
  text-align: center;
  font-size: 90%;
  padding: 3%;
  cursor: pointer;
  margin: 5px;
}
<table class="essenskarte">
  <tr>
    <td>
      <button type="submit" name="weinknorze">Pfälzer Weinknorze</button>
    </td>
    <td>
      <button type="submit" name="kaesewuerfel">Käsewürfel</button>
    </td>
    <td>
      <button type="submit" name="feta">Gegrillter Feta</button>
    </td>
    <td>
      <button type="submit" name="winzerkaes">Winzerkäs</button>
    </td>
    <td>
      <button type="submit" name="spundekaes">Spundekäs</button>
    </td>
  </tr>
  <tr>
    <td>
      <button type="submit" name="saumagen">Saumagen-Carpaccio</button>
    </td>
    <td>
      <button type="submit" name="lachs">Geräucherter Lachs</button>
    </td>
    <td>
      <button type="submit" name="curry">Curry-Reispfanne</button>
    </td>
    <td>
      <button type="submit" name="schnitzel">Mailänder Schnitzel</button>
    </td>
    <td>
      <button type="submit" name="jaegerschnitzel">Jägerschnitzel</button>
    </td>
  </tr>
  <tr>
    <td>
      <button type="submit" name="kroketten" style="background-color: rgb(255, 226, 80)">Kroketten</button>
    </td>
    <td>
      <button type="submit" name="fleischkloesse">Fleischklöße</button>
    </td>
    <td>
      <button type="submit" name="schweinebaeckchen">Schweinebäckchen</button>
    </td>
  </tr>
</table>
.essenskarte {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.essenskarte button {
  color: rgb(255, 255, 255);
  background-color: coral;
  width: 100%;
  height: 100%;
  word-wrap: break-word;
  display: block;
  border-radius: 10px;
  border: 4px double #cccccc;
  text-align: center;
  font-size: 90%;
  padding: 3%;
  cursor: pointer;
  margin: 5px;
}

I tried to auto adjust the buttons to the table size to make them always the full size, which works in the standard 16:9 1080p ratio but not in any other resolution.

Tags:

2

Answers


  1. 0

    you can use forms and you can use felx box and respondive
    flex box can definitely help you
    im not working in flex box and i dont know about that
    but you can search about responsive web pages

    Login or Signup to reply.
  2. 0

    you can avoid the buttons growing larger than others due to the text being longer when adjusting the browser window size by adding the min-width property to the essenskarte class, here’s an example of the mind-width for my browser, you may change the number accordingly, you can also add the max-width property for bigger screens.

     .essenskarte {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      min-width:821px}

    hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search