Table header and cell overflow hidden : th « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. th

Table header and cell overflow hidden

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> My favorite records  </title>
        <style rel='stylesheet' type='text/css'>

body {
    margin: 0;
}
table {
    width: 200px;
    border: thin solid black;
    table-layout: fixed;
}
th, td {
    overflow: hidden;
}
th, tfoot td {
    border: thin solid black;
    text-align: center;
    font-weight: bold;
}
tbody td {
    font-size: 120%;
}
caption {
    font-size: 90%;
    text-align: right;
}
td, th, caption {
    padding: 5px;
}
        </style>
    </head>
    <body>
        <div style='width: 200px;
                     height: 30px;
                     background: gray;
                     color: white;
                     text-align: center;'>
        &lt; -- 200 pixels -- &gt;
      </div>
        <table>
            <caption>
                records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th>a</th>
                    <th>a</th>
                    <th>r</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> B</td>
                    <td> V</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> Q</td>
                    <td> Q</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> M</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>a</td>
                    <td>a</td>
                    <td>r</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>








Related examples in the same category

1.'th' Example
2.'axis' Example
3.'scope' specifies the group of cells to which header information on the current cell refers
4.table header tag
5.thead is the first section of a table. It formats the table header area.
6.Basic table with th tag
7.Style for table header
8.Nested table header
9.Table header style
10.Table header format
11.Table header column span
12.Two level of table header
13.table header height: 50px;
14.Three row header
15.Grouped table header
16.Selecting cells in head
17.th height: 29px;
18.th width: 6em;
19.th colspan="2"
20.th, td overflow: hidden;