I want to create CSS-classes for the alignments of columns of tables.
I can achieve this by explicitly defining each class. Here is a complete working example:
<html>
<head>
<style>
table.s1l td:nth-child(1), table.s2l td:nth-child(2) {
text-align: left;
}
table.s1c td:nth-child(1), table.s2c td:nth-child(2) {
text-align: center;
}
table.s1r td:nth-child(1), table.s2r td:nth-child(2) {
text-align: right;
}
table.s5l td:nth-child(5) {
text-align: left;
}
</style>
</head>
<body>
<table class="s1c s2r">
<tr>
<td>center</td>
<td>right</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table style="text-align: center;" class="s5l">
<tr>
<td>center</td>
<td>center</td>
<td>center</td>
<td>center</td>
<td>column for comments comment (aligned left)</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>Here is a comment</td>
</tr>
</table>
</body>
</html>
In the first table, for each column one class was asigned. In the second table all columns are centered, except the last one. Therefor the class s5l was used.
All this is part of a wiki, where users can define their tables and assign classes to the tables. Therefor it is unpredictable, which alignments for which columns are nessessary. So with this method, I am forced to define all classes explicitly for all the potential columns.
Is it possibile to create those class names implicitly instead of defining the classes for a high number of potential columns?
I want to propose this to an existing CSS-file, where no scripting is allowed, so only pure CSS may be used.
In the end it should look like this:
<html>
<head>
<style> # However the solution looks like
table.s[N]l td:nth-child([N]) {
text-align: left;
}
table.s[N]c td:nth-child([N]) {
text-align: center;
}
table.s[N]r td:nth-child([N]) {
text-align: right;
}
</style>
</head>
<body>
<table class="s1c s2r">
<tr>
<td>center</td>
<td>right</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<table style="text-align: center;" class="s5l">
<tr>
<td>center</td>
<td>center</td>
<td>center</td>
<td>center</td>
<td>column for comments comment (aligned left)</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>Here is a comment</td>
</tr>
</table>
</body>
</html>
So the classes s1c, s2r and s5l are created dynamically. And if, on another Wikipage, a user adds a big table with 11 columns and wants the last one centered, he simply adds the class s11c and it should work.
Try this:
.tab td:nth-child(1) {
text-align: left;
}
.tab td:nth-child(2) {
text-align: center;
}
.tab td:nth-child(3) {
text-align: right;
}
Related
I want to place two HTML tables besides each other, having one centered in the webpage and the other one centered within the right margin of the of the first table.
myTable is supposed to be centered and keypadTable is a smaller table in the right margin of myTable
Currently, myTable is not at the centre of the overall webpage and keypadTable is just floating as expected
Right now:
[ (center) (right)]
What I want:
(eg. (center) is 9space from each "[]" and (right) is 1space from (centre) and closing bracket
[ (center) (right) ]
<table id="keypadTable" style="float: right;width: 300px; height:
341px; background-color: rgb(204, 204, 204);" border="1" cellpadding="5" cellspacing="5">
<tbody align="center"> </tbody>
</table>
<table id="mytable" style="float:center; text-align: right; width: 1014px; height:
341px; background-color: rgb(204, 204, 204); margin-left: auto; margin-right:auto;" border="1" cellpadding="5" cellspacing="5">
you want to use flex. create another invisible element the same size as your right table to get the spacing to work.
.flex {
display: flex;
justify-content: space-evenly;
}
.hidden {
visibility: hidden;
}
<div class="flex">
<table class='hidden'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</div>
Is the first row of an HTML table with th tags meant to be row 0? Because if I style the table rows with
.t01 tr:nth-child(even) {
color: red;
}
.t01 tr:nth-child(odd) {
color: white;
}
both the first row and the second row have the text color white. But the second row should be red, because 2 is even.
Without your Code it's hard to help, it shoud work as it is.
My guess is, you are using <thead> and <tbody> which results in 2 containers holding <tr> tags. So the nth-child of <thead> is odd and the nth-child of <tbody> is odd too
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.container div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container p {
font-size: 8pt;
}
.t01 {
background-color: #3d3d3d;
}
.t01 tr:nth-child(even) {
color: red;
}
.t01 tr:nth-child(odd) {
color: white;
}
.t02 {
background-color: #3d3d3d;
}
.t02 tr:nth-child(even) {
color: red;
}
.t02 tr:nth-child(odd) {
color: white;
}
.t03 {
background-color: #3d3d3d;
}
.t03 thead tr:first-child {
color: red;
}
.t03 tbody tr:nth-child(even) {
color: red;
}
.t03 tbody tr:nth-child(odd) {
color: white;
}
<div class="container">
<div>
<table class="t01">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<p>No <thead> & <tbody></p>
</div>
<div>
<table class="t02">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<p>With <thead> & <tbody></p>
</div>
<div>
<table class="t03">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<p>Fix for <thead> & <tbody></p>
</div>
</div>
You may need to reset the browser data on you browser. Especially if you've been playing around with the CSS, this can cause the page to look off.
Yes, that is true, the first row of the HTML table starts at 0.
For example :
// We have a table containing 3 rows
<table id="myTable">
<tr>
<td>Row1 cell1</td>
</tr>
<tr>
<td>Row2 cell1</td>
</tr>
<tr>
<td>Row3 cell1</td>
</tr>
</table>
We are retrieving 0th row
alert(document.getElementById("myTable").rows[0].innerHTML);
Output of this will be:
Row1 Cell1
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.
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;
}
Try with this
#tableId td
{
text-align:center;
vertical-align: middle;
}
OR just
td {
text-align:center;
vertical-align: middle;
}
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.
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
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>
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.
I am trying to center just certain columns in a table but I am having issues. I know in the past you would just simply apply inline styles to each TD but there has to be a better way.
Here is a simple example:
.centerText{
text-align:center;
}
<table border="1">
<col>
<col class="centerText">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
With that class I am trying to center the text inside. I know applying css to the col will work for changing background color for the column and text color and such, but I am not sure how I would use it to center a column. I am assuming because I need to center the contents of the td and this is probably just centering the TD element itself; which is already 100 percent.
I understand I can just say apply the css to the 5th TD in this TR but that seems fragile.
Also, bonus points if you can show me how to change the width of a column this way. I used the width attribute for col but that is deprecated in html 5 (even though it is still currently supported.
Done, your class wasn't used anywhere
tr td:nth-child(2) {
text-align:center;
}
<table border="1">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
I removed:
<col>
<col class="centerText">
and
.centerText{
text-align:center;
}
Because col doesn't mean anything and you didn't close the tags.
CSS
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center
}
If you want to align your all td content to the center
add the centerText class to your table
<table class="centerText" border="1">
It's not completely clear what you want, but if you want to center the contents of a certain column, you can just use this CSS rule:
td:nth-child(2) {
text-align:center;
}
In this example it applies to the second column, but you could define that for any column. It works since the td are always children of a tr, so you can use the nth-child selector.
td:nth-child(2) {
text-align: center;
}
<table border="1">
<col>
<col class="centerText">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
I want to set style for <td> tag, I am designing table in a page. I want to give different styles for upper and lower cells, is that possible to set <style> which only do work on down side <td> tags.
Please Help.
Yes, you either give a class to lower <td> tags and then inside <style> you can set their style. or you can use this css selector without giving your <td> elements a class.
Here is a representation of what I just said:
<table id="table1">
<tr>
<td>1</td>
<td class="lowertd">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td class="lowertd">2</td>
<td>6</td>
</tr>
</table>
<style>
#table1 tr td:last-child {
background-color: green;
}
.lowertd {
background-color: silver;
}
#table1 tr td:nth-child(1) {
background-color: blue;
}
</style>
For your requirement you need to create a css class and reference it by
<td class="someclass" ........... >
although you want to add this class, only for elements for which you need styling.
and in CSS under <style> , define css attributes. Something like below
<style>
.someclass{
property: value;
.
.
.
}
</style>
Hope this solves your problem.
I got the answer...
Just set the particular rows in any tag like <thead>, <tbody> or <tfoot>
<table id="table1">
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>6</td>
</tr>
</tbody>
</table>
then set style
<style>
table thead td
{
border:none;
}
</style>
You can style the first 10 <td> tags differently by using the nth-of-type selector and then setting a style for those elements:
td:nth-child(-n+10) { text-decoration: underline; }
jsfiddle