HTML table

USB · 02-12-2013, 06:45 PM

Hi, Just a quick question..

How do I move the text in the System column like 10px from the left?

Code:

<style>

.requirements {
	background-color:#2a2a2a;
	color:#FFF;
	border:1px solid #FFF;
	border-collapse:collapse;
	width:600px;
	font-size: 11px;
	font-family: Verdana, Geneva, sans-serif;
}

.minimum {
	padding: 5px 5px 5px 5px;	
}

.recommanded {
	padding: 5px 5px 5px 5px;
	font-weight:700;
}

.column {
	padding: 5px 5px 5px 5px;	
}

.system {
	font-weight:700;	
}

</style>
</head>

<body>
<table border="1" class="requirements">
	<thead>
    <tr>
        <th scope="col" style="width: 200px;" class="column">System</th>
        <th scope="col" style="width: 200px;" class="column">Minimum</th>
        <th scope="col" style="width: 200px;" class="column">Recommanded</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    	<td scope="row" class="system">OS</td>
        <td align="center" class="minimum">WindowsXP, Windows Vista</td>
        <td align="center" class="recommanded">WindowsXP, Windows Vista, Windows 7</td>
    </tr>
    <tr>
    	<td scope="row" class="system">CPU</td>
        <td align="center" class="minimum">Intel Pentium IV 1.6GHz<br />or equivalent</td>
        <td align="center" class="recommanded">Intel Pentium IV 2.0GHz<br />or equivalent</td>
    </tr>
    <tr>
    	<td scope="row" class="system">RAM</td>
        <td align="center" class="minimum">512MB</td>
        <td align="center" class="recommanded">1GB</td>
    </tr>
    <tr>
    	<td scope="row" class="system">HD SPACE</td>
        <td align="center" class="minimum">3GB</td>
        <td align="center" class="recommanded">3GB</td>
    </tr>
    <tr>
    	<td scope="row" class="system">GRAPHIC CARD</td>
        <td align="center" class="minimum">nVIDIA GeForce MX<br />or equivalent</td>
        <td align="center" class="recommanded">nVIDIA GeForce TI<br />or Radeon 9200</td>
    </tr>
    <tr>
    	<td scope="row" class="system">DIRECT X</td>
        <td align="center" class="minimum">DirectX 9.0c or higher</td>
        <td align="center" class="recommanded">DirectX 9.0c or higher</td>
    </tr>
    <tr>
    	<td scope="row" class="system">CONNECTION SPEED</td>
        <td align="center" class="minimum">DSL (128kpbs) or better</td>
        <td align="center" class="recommanded">DSL (256kpbs) or better</td>
    </tr>
    </tbody>
</table>

Rowsdower! · 02-12-2013, 08:49 PM

One option (of many):

Code:

.requirements tr td:first-child{padding-left:10px;}

And another:

Code:

.requirements tr td:first-child{text-indent:10px;}

Incidentally, you could do something like this for each column and skip the class names on each cell of each row. Just use the :nth-child() pseudo-class selector or the :nth-of-type() pseudo-class selector to target your columns as needed.

Shivani · 02-13-2013, 01:05 PM

You can use html tag
margin-left:10px