How can I center-align the text inside one column?
Question
I am trying to center the <td> that contain numbers in them:
<tr>
<td>October</td>
<td align="center">1</td>
<td>Cash</td>
<td></td>
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
I didn't want to do:
<td align="center">3</td>
because I didn't want to have to add that in each individual cell. So I tried this:
<tr>
<td>October</td>
<td align="center">1</td>
<td>Cash</td>
<td></td>
<div class="centered">
<td>3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</div>
</tr>
and added these in my css:
.centered {
text-align: center;
align: center;
float: center;
}
but they don't seem to work.
6 answers
solution1
0 2018-02-16 07:32:08
Try with this
#tableId td
{
text-align:center;
vertical-align: middle;
}
OR just
td {
text-align:center;
vertical-align: middle;
}
solution2
0 2018-02-16 07:34:02
Try this method:
<tr> <td>October</td> <td align="center">1</td> <td>Cash</td> <td></td> <table align="center"> <tr><td>3</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td></tr> </table> </tr>
Also: There float:center doesn't exist.
solution3
0 2018-02-16 07:34:25
There is no such thing as float: center
For horizontal alignment use text-align: center and for vertical use vertical-align: middle .
The problem with your code is that you have div inside table which is not valid html syntax. Put centered class directly to cell you want to center.
Hope that helps
solution4
0 2018-02-16 07:39:45
Add class to the table and apply style on the table data.
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } table.table1 tbody tr td { text-align: center; } </style> </head> <body> <table style="width:100%" class="table1"> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> <tr> <td>2489604</td> <td>My first CSS</td> <td>$47</td> </tr> </table> </body> </html>
solution5
0 ACCPTED 2018-02-16 07:43:24
If it is always the same column(s), you can write your css rule like this:
/* Center 3rd column */
table td:nth-child(3) {
text-align: center;
}
Or to center all but the 1st, 2nd, and 4th columns:
/* Center all columns */
table td {
text-align: center;
}
/* Override rule above to left align specific columns */
table td:nth-child(1), table td:nth-child(2), table td:nth-child(4) {
text-align: left;
}
/* Or simply apply 'text-left' class to desired td tags */
.text-left {
text-align: left;
}
solution6
0 2018-02-16 07:50:26
You are not referencing to the class in your table.
Your HTML should look something like this:
See code snippet below
$(".cash table tbody tr td:first-child").addClass("non-centered");
.centered table, td { text-align: center; border: 1px solid #eee } .non-centered { text-align: left; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="cash"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="centered"> <tr> <td>October</td> <td align="center">1</td> <td>Cash</td> <td>3</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </table> </div>
This is obviously if you want everything after the first column to be center aligned.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.