CODEWITHSUNDEEP
javascriptjqueryhtmlcss
htmlcsde
htmlcsde

Reputation: 41

html table row text to be aligned in the left

I am trying to make the data that are in the column 'Address' to not have margin. To begin from the left because they overflow. The html , css, and js code is here

I don't know why but I also tried the 

<td align="left">..</td>

but it didn't worked. Something in css code is blocking me to make this change.

and here I would like the two texts to be in the same line ,down in the page , because the one text is changing, but I can't make it together

Upvotes: 2

Views: 12432

Answers (5)

Amit Singh Rawat
Amit Singh Rawat

Reputation: 589

The align attribute is not supported in HTML5. Use CSS instead https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tr_align

Upvotes: 0

Just_Do_It
Just_Do_It

Reputation: 821

In case you want to make all td, th text left align then you can use this:

div#users-contain table td,
div#users-contain table th {
  border: 9px solid #eee;
  padding: .6em 220px .6em 20px ;
}

or if you want different for TD and TH then use this:

div#users-contain table th {
  border: 9px solid #eee;
  padding: .6em 120px;
}

div#users-contain table td {
  border: 9px solid #eee;
  padding: .6em 220px .6em 20px ;     
}

Upvotes: 0

Ojanti
Ojanti

Reputation: 36

I worked on you code. If you want the change to happen only on cells in the address Here is an easy fix. Add a class to the table cells you want to be changed and add this code to the css . It works

.classadded{
padding-left: 9px !important;
white-space: normal;
}

Here is a working fiddle

Upvotes: 0

Soviut
Soviut

Reputation: 91535

Don't try to set alignment in your HTML, set it in your css. You'll need to set text-align to left and set the padding to 0 on both th and td elements.

table, th, td {
  border: solid 1px #CCC;
}

table {
  width: 100%;
}

th, td {
  padding: 0;
  text-align: left;
}
<table>
  <tr>
    <th>first</th>
    <th>second</th>
  </tr>
  <tr>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td>first</td>
    <td>second</td>
  </tr>
</table>

Upvotes: 4

Mat
Mat

Reputation: 445

You need to remove the padding on the address cells.

And for the second point you juste need to add a display:inline-block http://jsfiddle.net/6v67a/1484/

Upvotes: 0

Related Questions