display: table

Details
Written by: Stanko Milosev
Category: CSS
Hits: 5132

Example of tables in CSS.

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="/index.css">
	</head>

	<body>
	
		<div class="tile-grid-row">
			<div class="tile-container">
				<div class="tile-small">
					Tile one
				</div>
			</div>

			<div class="tile-container">
				<div class="tile-small">
					Tile two
				</div>
			</div>
		</div>
		
		<div class="tile-grid-row">
			<div class="tile-container">
				<div class="tile-small">
					Tile three
				</div>
			</div>

			<div class="tile-container">
				<div class="tile-small">
					Tile four
				</div>
			</div>
		</div>		

	</body>

</html>

CSS:

.tile-grid-row {
	display: table;
	width: 444px;
}

.tile-container {
	display: table-cell;
}

.tile-small {
	width: 221px;
}

In HTML notice line: <div class="tile-grid-row">, then notice how I defined CSS class:

.tile-grid-row {
display: table;

After that in CSS notice line: display: table-cell;

display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TRs and TDs.

Example download from here.

---

Better and simple example of table with borders.

HTML:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="/index.css">
</head>

    <body>
        <div class="tile-table">
            <div class="tile-row">
                <div class="tile-cell">
                    <div class="description-text">
                        Tile one
                    </div>
                </div>

                <div class="tile-cell">
                    <div class="description-text">
                        Tile two
                    </div>
                </div>

            </div>


            <div class="tile-row">
                <div class="tile-cell">
                    <div class="description-text">
                        Tile three
                    </div>
                </div>

                <div class="tile-cell">
                    <div class="description-text">
                        Tile four
                    </div>
                </div>

            </div>

        </div>
    </body>

</html>

CSS:

.tile-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.tile-row {
    display: table-row;
    border: 1px solid #000;
}

.tile-cell {
    display: table-cell;
    width: 50%;
    border: 1px solid #000;
}

.description-text {
    position: relative;
    top: 1%;
}

Here notice first border-collapse: collapse, and then border in cell and row. Example download from here.