CODEWITHSUNDEEP
htmlcss
user1050619
user1050619

Reputation: 20856

Align table-cell using css

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%
}

Upvotes: 0

Views: 83

Answers (7)

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 1

Jon P
Jon P

Reputation: 19772

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.

Upvotes: 1

Code Maverick
Code Maverick

Reputation: 20415

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:

jsFiddle Results

Upvotes: 0

George Vidalakis
George Vidalakis

Reputation: 113

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.

Upvotes: 0

jonasnas
jonasnas

Reputation: 3580

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.

Upvotes: 0

zurfyx
zurfyx

Reputation: 32767

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

Upvotes: 0

user1618143
user1618143

Reputation: 1748

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.

Upvotes: 0

Related Questions