How to Apply Text-Align Left in The First Column and Text-Align Right in The Others

How to apply text-align left in the first column and text-align right in the others

You need to specify the following CSS:

.table td,
.table th
{
    text-align:left;
}

#right,
.table td + td,
.table th + th
{
    text-align:right;
}

Example here: http://jsfiddle.net/mWeYM/

You can read more about adjacent siblings CSS selector here: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Text-Align Left only for the values of First Column

You are looking for :first-child - http://w3schools.com/cssref/sel_firstchild.asp

body > table > tbody > tr > td{
  text-align: center;
}

body > table > tbody > tr > td:first-child {
  text-align: left;
}

Right alignment first column and left align second column in div of Bootstrap

I hope this is what you're looking for:

Sample Image

Source:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>

    <div class="container">
        <div class="row">
          <div class="col-md text-right">
           <img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
           <h1>Hello World</h1>
           <p>Bootstrap grid</p>
          </div>
          <div class="col-md">
            <img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
            <h1>Hello World</h1>
            <p>Bootstrap grid</p>
          </div>
          
        </div>
      </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

Left align the first column and center align the other columns in a Pandas table

The table can be pretty formatted in Pandas by assembling the two missing formatting conditions into a single df. I made the following two changes to the original code.

Hide index numbers with hide_index()

df[["Unit", "Abbreviation", "Storage"]].style.hide_index()

To apply to a subset of columns, you can use the subset parameter. Left align the first column by default and center align the other 2 columns using the subset parameter.
```
set_properties(subset=["Abbreviation", "Storage"], **{'text-align': 'center'})
```

Code:

import pandas as pd
from IPython.display import HTML
df = pd.DataFrame({'Unit': ['Bit', 'Nibble','Byte/Octet', 'Kilobyte', 'Megabyte', 'Gigabyte', 'Terabyte'], 'Abbreviation': ['b', '-', 'B', 'KB', 'MB', 'GB', 'TB'], 'Storage': ['Binary digit, single 0 or 1', '4 bits', '8 bits', '1024 bytes', '1024 KB', '1024 MB', '1024 GB']})
df[["Unit", "Abbreviation", "Storage"]].style.hide_index().set_properties(subset=["Abbreviation", "Storage"], **{'text-align': 'center'})

Results:

Pandas table

Usage:

Let's say that you have an Excel spreadsheet and you want to print a custom formatted table that looks better than Excel's built-in table templates. All you need to do is open the spreadsheet in Excel and export it as a csv file. Then run the following Python code to convert the csv file to a Pandas df.

import pandas as pd
filepath = '/path/to/FILE.csv' # replace with an existing path to FILE.csv
df = pd.read_csv(filepath)
df

Use this df to make a custom formatted table.

Right aligning one column and left aligning the other, within one table

Here you go, this should work :)

<style>
    #mytable {width:500px; margin:0 auto;}
    #mytable td {width:250px;}
    #mytable .left {text-align:right; background:#333;}
    #mytable .right {text-align:left; background:#666;}
</style>

<table id="mytable">
    <tr>
        <td class="left">1</td>
        <td class="right">2</td>
    </tr>   
</table>

Left align text in right aligned cell

Are you happy to use padding to align the text?

Change;

text-align: right;

To;

padding-left: 35%;

...or similar value.

http://jsfiddle.net/seG2S/3/

You could use Javascript to determine how wide your column is, and update the padding.

Under which circumstances textAlign property works in Flutter?

DefaultTextStyle is unrelated to the problem. Removing it simply uses the default style, which is far bigger than the one you used so it hides the problem.

textAlign aligns the text in the space occupied by Text when that occupied space is bigger than the actual content.

The thing is, inside a Column, your Text takes the bare minimum space. It is then the Column that aligns its children using crossAxisAlignment which defaults to center.

An easy way to catch such behavior is by wrapping your texts like this :

Container(
   color: Colors.red,
   child: Text(...)
)

Which using the code you provided, render the following :

Sample Image

The problem suddenly becomes obvious: Text don't take the whole Column width.

You now have a few solutions.

You can wrap your Text into an Align to mimic textAlign behavior

Column(
  children: <Widget>[
    Align(
      alignment: Alignment.centerLeft,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
        ),
      ),
    ),
  ],
)

Which will render the following :

Sample Image

or you can force your Text to fill the Column width.

Either by specifying crossAxisAlignment: CrossAxisAlignment.stretch on Column, or by using SizedBox with an infinite width.

Column(
  children: <Widget>[
    SizedBox(
      width: double.infinity,
      child: Container(
        color: Colors.red,
        child: Text(
          "Should be left",
          textAlign: TextAlign.left,
        ),
      ),
    ),
  ],
),

which renders the following:

Sample Image

In that example, it is TextAlign that placed the text to the left.

How may I align text to the left and text to the right in the same line?

<p style="text-align:left;">    This text is left aligned    <span style="float:right;">        This text is right aligned    </span></p>

Right align and left align text in same HTML table cell

If you want them on separate lines do what Balon said. If you want them on the same lines, do:

<td>
  <div style="float:left;width:50%;">this is left</div>
  <div style="float:right;width:50%;">this is right</div>
</td>

Set alignment and padding of first and second column in table via CSS

You could use the :first-child selector, like this:

td { padding: 10px }
td:first-child { text-align: right }

No aligning is needed in your table anymore.

How to Apply Text-Align Left in The First Column and Text-Align Right in The Others