Controlling Layout Within A Table Cell

How to control layout or positioning of elements in a table cell.

by stormwild

HTML

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>

    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width" />
    
    <title>Controlling Layout Within A Table Cell </title>
    
    <meta name="description" content="How to control layout or positioning of elements in a table cell.">

<head>
    <body>
        <div class="container">
        <table>
            <thead>
                <tr>
                     <th>Some Heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Some text <a href="">Some link</a> <button>Some Button</button></td>
                </tr>    
                <tr>
                    <td>Some text <a href="">Some link</a> <button>Some Button</button></td>
                </tr> 
        </tbody>
        </table>    
        </div><!-- end .container -->            
                
    </body>  
<html>

CSS

body { padding: 2em; font: 100%/1.5em Arial, Helvetica, san-serif; }

.container { width: 600px; margin: 0 auto; }

table {
    margin: 0 0 10px;
    width: 100%;
}

table th {
    padding: 3px 5px; 
}

table td {
    padding: 5px 8px;
}

table th {
    color: #676767;
    background: #ececec;
    font-weight: bold;
    padding: 8px 20px 9px;
}

table tr.Odd {
    background: #f9f9f9;
}

table td {
    color: #919191;
    border-top: 1px solid #ececec;
    font-size: 1.166em;
    padding: 7px 20px 9px;
}


table a {
    color: #ff4b9f;
    text-decoration: underline;
}

table a:hover {
    color: #ed7db6;
}