css centering tabular data

**datadriven** · Feb 8, 2012 21:17

Need to center various numerical data within a table and would rather not use align="center"
within each of the td's or a seperate div tag within each td

What's the most efficient way that a class can be applied to the values?

Code:

.tab {
border-right: 1px solid #CCC; 
border-left: 1px solid #CCC;
border-bottom: 2px solid #CCC;
font-weight: 300;
color: #000;
font-size: 0.90em; 
font-family: Arial, Helvetica, sans-serif;
}


<table width="140" border="1" bordercolor="#CCCCCC" cellspacing="0" cellpadding="0" class="tab">
    <tr>
      <td width="70">1000
      </td>
      <td width="70">1</td>
      </tr>
    <tr>
      <td>100000</td>
      <td>100</td>
    </tr>
  </table>

**ralph.m** · Feb 8, 2012 21:49

Originally Posted by datadriven

Need to center various numerical data within a table and would rather not use align="center"

Just use text-align: center in the CSS instead.

**dresden_phoenix** · Feb 8, 2012 22:10

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
/* this centers the tanle itself within it containr element. Also,am assuming you want no space between borders this CSS will keep you from having to style the table in the markup*/
	.tab {
		font-weight: 300;
		color: #000;
		font-size:90%; 
		font-family: Arial, Helvetica, sans-serif;
		margin:0 auto; 
		width:140px; 
                border-bottom: 2px solid #CCC;
		border-collapse: collapse; 
		border-spacing: 0;
		table-layout:fixed; /* this makes the WIDTH of the table cells  be automatically determined as WIDTH of table/# of columns, plus it's faster*/
		}
 /*this centers the text within each table cell, which I THINK is what you were asking for*/
	 .tab td{
	   text-align: center;
	    border: 1px solid #ccc;
	   }
</style>
	</head>
	<body>
<table class="tab">
    <tr>
      <td>1000</td>
      <td>1</td>
      <td>1000</td>
      </tr>
    <tr>
      <td>1000</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </table>
	</body>
</html>

Explanation is in the CSS comments. Hope this helps.

**datadriven** · Feb 9, 2012 10:00

Thanks dresden_phoenix,

Although I can't seem to use the
table-layout:fixed;

Since there is an label/identifier column that appears as a first <td>
Of course you had no way of knowing this because in my efforts to simplify the post I didn't mention it.

Tried to unfix that particular first column with:
width: 200px !important;

Appears as if, once the table is fixed, so is everything.

So - I'm setting the width within the .tab td

User Tag List

Thread: css centering tabular data

Thread Tools

Display

css centering tabular data

Bookmarks

Bookmarks

Posting Permissions