HTML表格特定列左对齐及字符长度限制配置求助

Got it, let's tackle your table styling requirements! Here's the modified code with clear explanations of the changes made:

Modified Full Code #

<style>
body { background-color: powderblue; }
code { background: #2db34a; border-radius: 6px; color: #fff; display: block; font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier; padding: 24px 15px; text-align: center; }
header, section, aside, footer { margin: 0 1.5% 24px 1.5%; }
section { float: left; width: 30%; }
footer { clear: both; margin-bottom: 0; }

/* Table styling additions */
table {
  width: 100%; /* Optional: Makes table fill its container */
  border-collapse: collapse; /* Optional: Clean up border spacing for a neater look */
}

/* Target first 3 columns (headers and data cells) for left alignment and wrapping */
table th:nth-child(1),
table td:nth-child(1),
table th:nth-child(2),
table td:nth-child(2),
table th:nth-child(3),
table td:nth-child(3) {
  text-align: left;
  overflow-wrap: break-word; /* Ensures long text/words wrap instead of overflowing the column */
}

/* Set max width using `ch` unit (1ch ≈ width of one character) */
table th:nth-child(1),
table td:nth-child(1),
table th:nth-child(3),
table td:nth-child(3) {
  max-width: 10ch; /* Limits column to ~10 characters */
}

table th:nth-child(2),
table td:nth-child(2) {
  max-width: 50ch; /* Limits column to ~50 characters */
}
</style>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
  <tr>
    <th><a href="#">Code</a></th>
    <th><a href="#">Description</a></th>
    <th><a href="#">Quantity</a></th>
    <th class="right"><a href="#">Item 4</a></th>
  </tr>
  <tr>
    <td><a href="#">123245</a></td>
    <td><a href="#">This is a description of item 1</a></td>
    <td><a href="#">100</a></td>
    <td class="right"><a href="#">Item 4</a></td>
  </tr>
  <tr>
    <td><a href="#">678910111213</a></td>
    <td><a href="#">This is a description of item 2 and it is longer than description 1</a></td>
    <td><a href="#">1000</a></td>
    <td class="right"><a href="#">Item 4</a></td>
  </tr>
</table>

Key Changes Explained #

• Column Targeting: Used :nth-child() selectors to precisely target the first, second, and third columns (both header <th> and data <td> elements)
• Left Alignment: Added text-align: left to these columns to match your alignment requirement
• Character Limit & Wrapping:
  • Used the ch CSS unit (1ch roughly equals the width of one character) to set max-width values that align with your character limits (10ch for columns 1/3, 50ch for column 2)
  • Added overflow-wrap: break-word to ensure long strings (like the extended number in your example) automatically wrap instead of overflowing the column
• Semantic Fix: Changed the <th> elements in your data rows to <td>—<th> is intended for header cells, so using <td> for data makes your HTML more semantic (this doesn't affect styling but is a best practice)

内容的提问来源于stack exchange，提问作者ecuso