column header center align , but want the cell right align - html

I want the cell align center , but keep text right align. for detail please run the code.
table{border:solid ; width:100%}
th{text-align:center}
td{text-align:center}
<div>now my table show like this</div>
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr><td>123</td><td>456</td><td>789</td></tr>
<tr><td>1231</td><td>4561</td><td>7891</td></tr>
<tr><td>12312</td><td>45612</td><td>78912</td></tr>
</table>
<br>
<div>but i want to like this</div>
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr><td> 123</td><td> 456</td><td> 789</td></tr>
<tr><td> 1231</td><td> 4561</td><td> 7891</td></tr>
<tr><td>12312</td><td>45612</td><td>78912</td></tr>
</table>


i solve it with add more th and td but it work Correctly
code
table{border:solid ; width:100%}
th{text-align:center}
td{text-align:right}
#td{
width: 20px;
}
<div>now my table show like this</div>
<table>
<tr><th>&nbsp</th><th id="td">hello</th><th>&nbsp</th><th id="td">world</th><th>&nbsp</th><th id="td">jasper</th><th>&nbsp</th></tr>
<tr><td>&nbsp</td><td id="td">123</td><td>&nbsp</td><td id="td">456</td><td>&nbsp</td><td id="td">789</td><td>&nbsp</td></tr>
<tr><td>&nbsp</td><td id="td">1231</td><td>&nbsp</td><td id="td">4561</td><td>&nbsp</td><td id="td">7891</td><td>&nbsp</td></tr>
<tr><td>&nbsp</td><td id="td">12312</td><td>&nbsp</td><td id="td">45612</td><td>&nbsp</td><td id="td">78912</td><td>&nbsp</td></tr>
http://liveweave.com/6EFpKY


One solution is to add a div inside th th and td elements and give them a fixed length.
HTML:
<table>
<tr>
<th>
<div>hello</div>
</th>
<th>
<div>world</div>
</th>
<th>
<div>jasper</div>
</th>
</tr>
<tr>
<td>
<div>123</div>
</td>
<td>
<div>456</div>
</td>
<td>
<div>789</div>
</td>
</tr>
<tr>
<td>
<div>1231</div>
</td>
<td>
<div>4561</div>
</td>
<td>
<div>7891</div>
</td>
</tr>
<tr>
<td>
<div>12312</div>
</td>
<td>
<div>45612</div>
</td>
<td>
<div>78912</div>
</td>
</tr>
</table>
CSS:
table {
border:solid;
width:100%
}
td div {
width:40px;
text-align:right;
margin-left: auto;
margin-right: auto;
}
th div {
width:40px;
text-align:right;
margin-left: auto;
margin-right: auto;
}
Try it out:
http://fiddle.jshell.net/hdgjnuab/1/
Hope it helps!


Change your CSS and HTML table code with below one.
CSS:
table{border:solid ; width:100%}
th{text-align:center}
td{direction:rtl;}
.title {margin-right:46%;}
HTML:
<table>
<tr><th>hello</th><th>world</th><th>jasper</th></tr>
<tr>
<td><span class="title">123</span></td>
<td><span class="title">456</span></td><td><span class="title">789</span></td></tr>
<tr><td><span class="title">1231</span></td><td><span class="title">4561</span></td><td><span class="title">7891</span></td></tr>
<tr><td><span class="title">12312</span></td><td><span class="title">45612</span></td><td><span class="title">78912</span></td></tr>
</table>
Output:
No need to define fix width of table cells.

Related

Inner table adds 1-2 pixels of padding on the left

Let's say I have a table:
<table>
<tr>
<td>
Hello How are you this is a TEST!
</td>
<tr>
<tr>
<td>
<table>
<tr>
<td>
Hello this a test 2!
</td>
</tr>
</table>
<td>
<tr>
</table>
Just as an example, I have one TD in my main table, however I need to do 3 TD in my child table. If i do it as I shown above, it looks like this.
Hello How are you this is a TEST!
Hello this is a Test2!
The inner table gives me a padding-left of about 1-2 pixels. Is there any way to line up both statements?

Collapse your borders and remove your cell padding. Also you have a few td and tr tags improperly closed.
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
table {
border-collapse: collapse;
}
table td {
padding: 0;
}
<table>
<tr>
<td>
Hello How are you this is a TEST!
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Hello this a test 2!
</td>
</tr>
</table>
</td>
</tr>
</table>

Sure. That space is due to two factors:
Table cells, by default, have space between them. To collapse cells together, you need to apply border-collapse: collapse to the parent table.
Table cells have 1px of padding by default. You'll need to get rid of that by doing td { padding: 0; }
table {
border-collapse: collapse;
}
table td {
padding: 0;
}
<table>
<tr>
<td>
Hello How are you this is a TEST!
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
Hello this a test 2!
</td>
</tr>
</table>
</td>
</tr>
</table>
If you'd like a more visual example, you can check out this JSFiddle.

Try this:
<style>
table {
border-spacing:0;
}
td {
margin-left:0px;
padding-left: 0px;
}
</style>
...
<table>
<tbody>
<tr>
<td>
Hello How are you this is a TEST!
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
Hello this a test 2!
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Increasing last TR height till parent td height

I have a scenario where one table had some tr and other table have less tr's than first one table.Both tables are under td's. In this Scenerio how to increase only last tr height of html table in % mode not in px mode
HTML CODE:
<table border="1" style="width:100%">
<tr>
<td style="width:50%">
<table border="1" style="width:100%">
<tr>
<td>
A
</td>
</tr>
<tr>
<td>
B
</td>
</tr>
<tr>
<td>
C
</td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table border="1" style="width:100%;">
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
jsfiddle Demo

Try like this: Demo This will expand only last row of right side content
CSS:
table {
height: 100%;
width: 100%;
}
td {
}
.table {
display: table;
height:100%;
}
.cell {
vertical-align: top;
display: table-cell;
height:100%;
}
.container {
height: 100%;
-moz-box-sizing: border-box;
}
HTML:
<table border="1" style="width:100%;" class="table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td class="cell">
<div class="container">Increse this row height till parents td height</div>
</td>
</tr>
</table>
EDIT: If you want right column should be equally expanded, you can use like this: Demo
CSS:
table {
height: 100%;
width: 100%;
}
Hope this is what you want!!

use single table and rowspan
<table border="1" style="width:100%">
<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td rowspan="3">3</td></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
</table>

Make multiple tables display in one line with scroll

So I am creating tables on a page dynamically, and the rows in each table are also dynamic. I want to display them all in one line and make them scroll horizontally if there is an overflow instead of wrapping. I set inline and overflow scroll:
.tableDiv {width:100%; overflow:scroll; display:inline}
but they are still wrapping. Any help on this would be greatly appreciated!
Here is the jsfiddle: http://jsfiddle.net/xAxfr/

http://jsfiddle.net/xAxfr/2/
.tableDiv {
width:100%;
overflow:auto;
white-space:nowrap;
}
.table {
border-collapse:collapse;
border-spacing:0;
display:inline-block;
}
white-space:nowrap; and display:inline-block;

Remove float: left on .table and add white-space: nowrap on .tableDiv.
http://jsfiddle.net/xAxfr/1/

I think that you could use "The Table Method" as described here. If you next the tables in another table instead of a div, you can make the row as wide as you want creating the same effect.
ex.
<table class="tableContainer">
<tr>
<td>
<table class="table">
<tr>
<th colspan="2">
Table One
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>
<td>
<table class="table">
<tr>
<th colspan="2">
Table Two
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>

Controlling a table row if it has bottom border or not

I am using Bootstrap.
I have a table, where some rows needs to be grouped with the rows below them.
That means there should be no border between them.
I am wondering if there is an inherent bootstrap way of doing this, or do I need to
put on each tr style="..no border.."
All I care is for the solution to work on Chrome (and nice to have on FF).

<table>
<tr>
<td>
<label>Stuff</label>
</td>
<td>
<label>sdrfg</label>
</td>
</tr>
<tr class="group">
<td>
<label>Other stuff</label>
</td>
<td>
<label>asdfgh</label>
</td>
</tr>
<tr>
<td>
<label>Other stuff</label>
</td>
<td>
<label>asdfgh</label>
</td>
</tr>
</table>
CSS:
table{
width:100%;
border-collapse:collapse;
}
table td{
border-top:1px solid #000000;
}
table tr.group>td{
border-top:none;
}

Full width table in a scrollingcontainer

I'm about to create a table which is going to look like this one right here:
Now it's getting tricky since the website is going to be responsive. That's why I thought it would be nice to wrap the table in a div .cross-tab which has overflow: scroll.
<div class="bs-example">
<div class="cross-tab">
<table>
<thead>
<tr>
<? for ($i=0; $i < 19; $i++) { ?>
<th>
<img src="http://placehold.it/40x40" class="team-icon">
</th>
<? } ?>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
</div>
The div should have a certain width the overflow: scroll. So the table would be full-sized on any device but get cropped off on small screens with a scrollbar to scroll arround:
Is there a way to accomplish this with pure CSS or do I have to calculate the full table with with js and so on?

You can fix your problem with media query.
For example :
HTML
<body>
<div>
<table border="1" cellspacing="2" cellpadding="0">
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
</table>
</div>
</body>
CSS
div
{
background : red;
width:100%;
overflow:auto;
}
table
{
width :100%;
overflow:hidden;
}
#media screen and (max-width: 640px)
{
table
{
width : 800px;
}
div
{
height:200px;
}
}
codepen : http://codepen.io/ColoO/pen/xuACl