How do I left or right justify, text within specific columns of a table in HTML,CSS-CodePudding

In the following code, I need to left justify the text in the first two columns and right justify the text in the last 4 columns with the exception of the table headers. Can't seem to figure it out and when I look for answers online I can't find anything on how to justify text within the cell of a table or specifically texts of just two columns. Would appreciate any help. Thanks

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 2px solid #CBC3E3;
}

td {
  border: 2px solid #CBC3E3;
  padding: 8px;
}

th {
  border: 2px solid #CBC3E3;
  color:purple;
  text-align: center;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #CBC3E3;
}

.highlight{
  text-align: center;
  padding: 8px;
  color:purple;
  font-size: 225%;
  font-family: 'Verdana'
}
</style>
</head>
<body>

<h2 class=highlight>Top 10 Stocks</h2>

<table>
  <tr>
    <th>Symbol</th>
    <th>Company</th>
    <th>Market Cap</th>
    <th>Price</th>
    <th>Dividend</th>
    <th>5-Year Growth</th>
  </tr>
  <tr>
    <td>MSFT</td>
    <td>Microsoft Corporation</td>
    <td>2.31T</td>
    <td>308.79</td>
    <td>.80%</td>
    <td>404.02%</td>
  </tr>
  <tr>
    <td>AAPL</td>
    <td>Apple Inc.</td>
    <td>2.78T</td>
    <td>173.04</td>
    <td>.52%</td>
    <td>493.54%</td>
  </tr>
  <tr>
    <td>AMZN</td>
    <td>Amazon.com Inc.</td>
    <td>1.46T</td>
    <td>2960.99</td>
    <td>N/A</td>
    <td>244.54%</td>
  </tr>

CodePudding user response：

Use the nth-child if you wanna specify exactly td which you wanna set style. Take a look below. (Paste this code at the very bottom)

tr td:nth-child(3), tr td:nth-child(4), tr td:nth-child(5), tr td:nth-child(6) {
  text-align: right;
}
th {
  text-align: center;
}

CodePudding user response：

If you don't want to use a class, you can add the following style

td   td   td {
    text-align: right;
}

td:nth-child(n 3) {
    text-align: right;
}

I hope this worked for you!