The table isn't aligned

Question:
The table of expansions is not aligned. In the screenshot below, you can see that the text and buttons are not aligned at all. I know the number before “remaining” is invisible, I’m working on fixing it.

Repl link:
https://replit.com/@element1010/Cosmic-Adventure

    <h2 class="text">Add an expansion</h2>
    <table>
      <tr>
        <td>Tier 1</td>
        <td>Tier 2</td>
        <td>Tier 3</td>
        <td>Tier 4</td>
        <td>Tier 5</td>
        <td>Tier 6</td>
      </tr>
      <tr>
        <td><button class="green-button" onclick="s.expand(1);">Expand ($300)</button></td>
        <td><button class="green-button" onclick="s.expand(2);">Expand ($750)</button></td>
        <td><button class="green-button" onclick="s.expand(3);">Expand ($1250)</button></td>
        <td><button class="green-button" onclick="s.expand(4);">Expand ($2000)</button></td>
        <td><button class="green-button" onclick="s.expand(5);">Expand ($3000)</button></td>
        <td><button class="green-button" onclick="s.expand(6);">Expand ($5000)</button></td>
      </tr>
      <tr>
        <td><span id="expansion-1-remaining">0</span> remaining</td>
        <td><span id="expansion-2-remaining">0</span> remaining</td>
        <td><span id="expansion-3-remaining">0</span> remaining</td>
        <td><span id="expansion-4-remaining">0</span> remaining</td>
        <td><span id="expansion-5-remaining">0</span> remaining</td>
        <td><span id="expansion-6-remaining">0</span> remaining</td>
      </tr>
    </table>

The fixed code is this:

script.js lines 48-53:

<td><button class="green-button table-button" onclick="s.expand(1);">Expand ($300)</button></td>
        <td><button class="green-button table-button" onclick="s.expand(2);">Expand ($750)</button></td>
        <td><button class="green-button table-button" onclick="s.expand(3);">Expand ($1250)</button></td>
        <td><button class="green-button table-button" onclick="s.expand(4);">Expand ($2000)</button></td>
        <td><button class="green-button table-button" onclick="s.expand(5);">Expand ($3000)</button></td>
        <td><button class="green-button table-button" onclick="s.expand(6);">Expand ($5000)</button></td>

Then, add this to your style.css:

.table-button {
  left:0;
}

It’s also considered good CSS practice to change clickable object’s cursors:

.navbutton {
  cursor:pointer;
}
1 Like

It’s better if you make changes in your CSS for any future development.

So I’d suggest setting the table-layout property to fixed which will make the columns more uniform.
And use the vertical-align property to align the content of the cells vertically. If you want to align the text and buttons in the center of the cells, you can use something like vertical-align: middle;

/* You can organize table cell styles for better uniformity */
table {
  width: 100%; /* This makes the table span the entire width (percentage values make it responsive) */
  table-layout: fixed; /* And this helps in uniform column widths too */
}

/* Like I said about the vertical-align */
td {
  vertical-align: middle;
  text-align: center; 
  box-sizing: border-box; 
  padding: 10px;
}
/* And for the buttons too */
.green-button {
  display: inline-block; /* This allows width, margin, and padding */
  margin: 0 auto; /* And this centers the button if in a block-level container */
}

2 Likes

Yes, I was planning on that.

I’m pretty sure this was the part that messed up the research table, any ideas on how to fix that?

You can apply a class to the specific table you want to style and then define the styles for that class (rather than applying them to all table elements.)

So, in your HTML you add a new class:

<table class="expansions-table"> <!-- replace with the actual classes you assign to your tables in the HTML -->
  <!-- And then put your table rows and cells -->
</table>

And then in your CSS, you can create specific styles for this class, like this:

.expansions-table {
  width: 100%;
  table-layout: fixed;
}

.expansions-table td {
  vertical-align: middle;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}

And this way, the styles that you want for the expansion table will not affect other tables like the research table you said (you can use the same thing with the reserach table too).

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.