Alignment of text in specific column of table

Question

I'm trying to change the alignment of specific columns of text to the right. Tried using class and it does not work. I even tried to use id element and it does not work either.

Code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf=8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Book Ordering System</title>
</head>
<style>
  .top-bottom {
    background-color: skyblue;
  }
  
  .total_column {
    background-color: silver;
  }
  
  .all:hover {
    background-color: yellow;
  }
</style>

<body>
  <h1>Book Ordering System</h1>
  <table border="2">
    <form method="post" action="file.php">
      <tr style="font-weight:bold" ; class="top-bottom all">
        <td>No.</td>
        <td>Book Title</td>
        <td>Author</td>
        <td>Category</td>
        <td>Unit Price</td>
        <td>Quantity</td>
        <td>Total</td>
      </tr>
      <tr class="all">
        <td>1</td>
        <td>
          <label for="sec1"></label>
          <input type="text" name="sec1" id="sec1" value="" />
        </td>
        <td>
          <label for="sec1.1"></label>
          <input type="text" name="sec1.1" id="sec1.1" value="" />
        </td>
        <td>
          <select name="category" id="category">
            <option value="choose">Please choose the category...</option>
            <option value="biz">Business</option>
            <option value="fiction">Fiction</option>
            <option value="maths">Mathematics</option>
            <option value="tech">Technology</option>
          </select>
        </td>
        <td>
          <label for="sec1.2"></label>
          <input type="text" name="sec1.2" id="sec1.2" value="0.00" />
        </td>
        <td>
          <label for="sec1.3"></label>
          <input type="text" name="sec1.3" id="sec1.3" value="0" />
        </td>
        <td>
          <label for="sec1.4"></label>
          <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
        </td>
      </tr>
      <tr class="all">
        <td>2</td>
        <td>
          <label for="sec1"></label>
          <input type="text" name="sec1" id="sec1" value="" />
        </td>
        <td>
          <label for="sec1.1"></label>
          <input type="text" name="sec1.1" id="sec1.1" value="" />
        </td>
        <td>
          <select name="category" id="category">
            <option value="choose">Please choose the category...</option>
            <option value="biz">Business</option>
            <option value="fiction">Fiction</option>
            <option value="maths">Mathematics</option>
            <option value="tech">Technology</option>
          </select>
        </td>
        <td>
          <label for="sec1.2"></label>
          <input type="text" name="sec1.2" id="sec1.2" value="0.00" />
        </td>
        <td>
          <label for="sec1.3"></label>
          <input type="text" name="sec1.3" id="sec1.3" value="0" />
        </td>
        <td>
          <label for="sec1.4"></label>
          <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column " />
        </td>
      </tr>
      <tr class="all">
        <td>3</td>
        <td>
          <label for="sec1"></label>
          <input type="text" name="sec1" id="sec1" value="" />
        </td>
        <td>
          <label for="sec1.1"></label>
          <input type="text" name="sec1.1" id="sec1.1" value="" />
        </td>
        <td>
          <select name="category" id="category">
            <option value="choose">Please choose the category...</option>
            <option value="biz">Business</option>
            <option value="fiction">Fiction</option>
            <option value="maths">Mathematics</option>
            <option value="tech">Technology</option>
          </select>
        </td>
        <td>
          <label for="sec1.2"></label>
          <input type="text" name="sec1.2" id="sec1.2" value="0.00" />
        </td>
        <td>
          <label for="sec1.3"></label>
          <input type="text" name="sec1.3" id="sec1.3" value="0" />
        </td>
        <td>
          <label for="sec1.4"></label>
          <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
        </td>
      </tr>
      <tr class="all">
        <td>4</td>
        <td>
          <label for="sec1"></label>
          <input type="text" name="sec1" id="sec1" value="" />
        </td>
        <td>
          <label for="sec1.1"></label>
          <input type="text" name="sec1.1" id="sec1.1" value="" />
        </td>
        <td>
          <select name="category" id="category">
            <option value="choose">Please choose the category...</option>
            <option value="biz">Business</option>
            <option value="fiction">Fiction</option>
            <option value="maths">Mathematics</option>
            <option value="tech">Technology</option>
          </select>
        </td>
        <td>
          <label for="sec1.2"></label>
          <input type="text" name="sec1.2" id="sec1.2" value="0.00" />
        </td>
        <td>
          <label for="sec1.3"></label>
          <input type="text" name="sec1.3" id="sec1.3" value="0" />
        </td>
        <td>
          <label for="sec1.4"></label>
          <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
        </td>
      </tr>
      <tr class="all">
        <td>5</td>
        <td>
          <label for="sec1"></label>
          <input type="text" name="sec1" id="sec1" value="" />
        </td>
        <td>
          <label for="sec1.1"></label>
          <input type="text" name="sec1.1" id="sec1.1" value="" />
        </td>
        <td>
          <select name="category" id="category">
            <option value="choose">Please choose the category...</option>
            <option value="biz">Business</option>
            <option value="fiction">Fiction</option>
            <option value="maths">Mathematics</option>
            <option value="tech">Technology</option>
          </select>
        </td>
        <td>
          <label for="sec1.2"></label>
          <input type="text" name="sec1.2" id="sec1.2" value="0.00" />
        </td>
        <td>
          <label for="sec1.3"></label>
          <input type="text" name="sec1.3" id="sec1.3" value="0" />
        </td>
        <td>
          <label for="sec1.4"></label>
          <input type="text" name="sec1.4" id="sec1.4" value="0.00" readonly="readonly" class="total_column" />
        </td>
      </tr>
      <tr class="top-bottom all">
        <td colspan="5" align="right"><input type="button" onclick="alert('Hello World!')" value="Calculate Grand Total Price"> </td>
        <td colspan="2" align="right"><input type="text" name="sec3.1" id="sec3.1" value="0.00" readonly="readonly" /></td>
      </tr>


    </form>
  </table>
</body>

</html>

Result: current result

You have input fields there, that are as wide as the table cells. So your input fields _are_ aligned to the right - but because they are full width, of course you don’t notice that visually. What you actually want to do, is align the text inside your input fields to the right. — 04FS, Oct 01 '20 at 08:53
Is there any other way to group them and style them together? — Deadshot 123, Oct 01 '20 at 08:55
**Notice:** you're using the same ID for several elements. Please, check this post [Can multiple different HTML elements have the same id?](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id) — xKobalt, Oct 01 '20 at 09:03

score 0 · Answer 1 · answered Oct 01 '20 at 08:59

0

The text you are trying to align is inside input fields. You want to align the text instead of the input fields.

td.align-right input {
   text-align: right;
}

And then apply class="align-right" to all the td's you want to align right.

answered Oct 01 '20 at 08:59

Fuzzy

486
3
7

Alignment of text in specific column of table

1 Answers1