Align table-cell using css - html

Question

I need to reduce the whitespace between Name: and the "Bob",similary between Age: and "20".
How can I accomplish using css.
fiddle:
http://jsfiddle.net/QfN3f/2/
html:
<table class="table">
<tr class="table-row">
<td class="table-col">Name:</td>
<td class="table-col">Bob</td>
<td class="table-col">Age:</td>
<td class="table-col">20</td>
</tr>
</table>
css:
.table {
width:100%
}

Answer 1

I'd add a class to your "labels"
<table class="table">
<tr class="table-row">
<td class="table-col label">Name:</td>
<td class="table-col">Bob</td>
<td class="table-col label">Age:</td>
<td class="table-col">20</td>
</tr>
</table>
CSS
.table {
width:100%
}
.label {width:50px; font-weight:bold;}
http://jsfiddle.net/QfN3f/5/
You could also use n-th child.
tr td:nth-child(odd) {width:50px; font-weight:bold;}
http://jsfiddle.net/QfN3f/6/
I would also re-consider the appropriatness of a table here as it may not actually be tabular data. Maybe consider a definition list.

Answer 2

If you must use a table for this, I'd suggest (assuming that your label td elements are always the odd-numbered elements):
td:nth-child(odd) {
text-align: right;
}
td:nth-child(even) {
text-align: left;
}
JS Fiddle demo.
But, I'd strongly suggest moving to more semantic HTML, such as a definition list:
<dl>
<dt>Name</dt>
<dd>Bob</dd>
<dt>Age</dt>
<dd>20</dd>
</dl>
With the CSS:
dt, dd {
display: inline-block; /* allows the elements to be side-by-side */
width: 5em;
margin: 0; /* removes the default margins */
padding: 0.2em 0; /* aesthetics, but sets/overrides the defaults */
}
dt {
text-align: right; /* to move the 'label' towards the 'value' */
}
dd {
text-align: left;
text-indent: 0.5em; /* aesthetic, gives a small separation; adjust to taste */
}
JS Fiddle demo.

Answer 3

The gaps are so wide because table cells will expand to take up as much space as is available. To reduce the whitespace, stop stretching the table all the way across the parent div. Simply remove width:100% from the table.
Of course, you may want to simultaneously add a min-width to the cells, so that the columns don't get too close together.

Answer 4

Add a % or fixed width to the column:
<td class="table-col" width="20px">Name:</td>
or
HTML
<td class="table-col name-col">Name:</td>
CSS
.name-col{
width:20px;
}
If no width per column is specific the columns width is the same for each one.
If you want to reduce to the gaps space you may also want to reduce the table width by removing width:100% and writing a fixed width or smaller one or writing a fixed width to all the columns.
Jsfiddle

Answer 5

You can remove width:100% and specify padding for table cells (td).
.table td {
padding: 10px
}
jsfiddle
Also if you want to customize some individual cells you can add different class to some <td class="myCustomClass"> and assign different width/padding or whatever property you want in css.

Answer 6

Use this html code:
<table class="table">
<tr class="table-row">
<td class="table-col-a">Name:</td>
<td class="table-col-b">Bob</td>
<td class="table-col-a">Age:</td>
<td class="table-col-b">20</td>
</tr>
</table>
And this css code:
.table-col-a{float:right;}
Also you can use paddings to make it exactly as you want.

Answer 7

See working jsFiddle demo
Simply modify your HTML to:
<table class="table">
<tr class="table-row">
<td class="table-cola">Name:</td>
<td class="table-colb">Bob</td>
<td class="table-cola">Age:</td>
<td class="table-colb">20</td>
</tr>
</table>
and your CSS to:
.table
{
width:100%
}
.table td
{
width: 25%;
}
.table-cola
{
text-align: right;
}
.table-colb
{
text-align: left;
}
that will yield: