CODEWITHSUNDEEP
htmlcsscentering
krfkeith
krfkeith

Reputation: 193

How can I center a table relative to one column in HTML/CSS?

What I'm looking for is something along the lines of this:

        Center
          |
+----+---------+
|    |    |    |
+----+---------+
     +---------+----+
     |    |    |    |
     +---------+----+

Basically, I'm trying to build a table for which some of the items will have prefixes (like a currency symbol) and others will have suffixes. However, I want the cells containing the main data itself to be what is aligned relative to the center, and what comes before or after it to "hang" on the sides. Is what I'm describing possible, and perhaps more importantly, is there a good way to do this cross-browser?

Here is an example of what I'm referring to: http://jsfiddle.net/akjs80fs/

In the fiddle I linked, if it were formatted as I'm trying to achieve, the "X" would be in the center of the page.

Upvotes: 1

Views: 75

Answers (1)

starvator
starvator

Reputation: 1017

One way to do it would be to use blank columns:

Built it like you mentioned, but instead leave the 2 areas with an x blank, and remove the outside borders of these areas.

        Center
          |
+----+---------+----+
|    |    |    | x  |
+----+---------+----+
+----+---------+----+
| x  |    |    |    |
+----+---------+----+

You can center the entire table on the page, or keep it justified to the left. It does not matter since the table will auto align. Make it a super simple table, like this.

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td class="noborder">4</td>
  </tr>
  <tr>
    <td class="noborder">1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

add css accordingly: 

table td {
    border:1px solid black;
}
.noborder {
    border:0px;
}

Made a JSFiddle for the funs

Upvotes: 1

Related Questions