Getting rid of width attribute and using something else to line up both texts

问题

Is it possible to align these texts with each other automatically?

I want to align the pink word with group At the top so they are both matching at the same level

#title {
  float: left;
  margin-left: 15px;
  padding-left: 15px;
  padding-top: 5px;
  font-size: 0.5vw;
  font-family: 'Armata';
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  text-align: center;
}

<!-- This the table texts at the top -->

<table id="topTable" width="100%">
  <tr class="heading">
    <th width='1%'>ID</th>
    <th width='15%'>Name</th>
    <th width='5%'>Money</th>
    <th width='25%'>Job</th>
    <th width='15%'>Group</th>
    <th width='5%'>WP</th>
    <th width='5%'>Ping</th>
    <th width='1%'>Country</th>
  </tr>
</table>

<!-- This the pink table i want to align with the one at the top -->

<tr class="playersTable">
  <th width="5%">' ..playerID.. '</th>
  <th width="25%">' .. sanitize(name) .. '</th>
  <th width="15%">' .. (money) .. '</th>
  <th width="15%">' .. job .. '</th>
  <th width="15%">' .. group .. '</th>
  <th width="5%">' .. wantedLevel .. '</th>
  <th width="5%">' .. ping .. '</th>
  <th width="15%">' .. country .. '</th>
</tr>

I want to get rid of this width stuff and hopefully do it automatically, sorry if anything is not clear.

回答1:

i would get rid of the % widths and try to combine the tables into one. use css to set width of each column if necessary and align the columns to your liking. doing so would give you consistent horizontal text alignment on all columns and control over how you want to style each row or column accordingly.

.table {
  width: 100%;
  
}

.table tr {
  text-align: left;
}

.table th {
  /* style however you like for the header row here */
  font-weight: bold;
}


/* use n-th child value select which column you'd like to style differently from default */
.table td:nth-child(5), .table th:nth-child(5) {
  text-align: right;
}

<table class="table">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Money</th>
    <th>Job</th>
    <th>Group</th>
    <th>WP</th>
    <th>Ping</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>' ..playerID.. '</td>
    <td>' .. sanitize(name) .. '</td>
    <td>' .. (money) .. '</td>
    <td>' .. job .. '</td>
    <td>' .. group .. '</td>
    <td>' .. wantedLevel .. '</td>
    <td>' .. ping .. '</td>
    <td>' .. country .. '</td>
  </tr>
</table>

来源：https://stackoverflow.com/questions/61297130/getting-rid-of-width-attribute-and-using-something-else-to-line-up-both-texts

标签

html

css