Basics: CSS tables

HTML & CSS
1

Hope all is well,

I am having some difficulties getting my layout to span correctly. When I run it in the browser the table does not take up 100% of the view port; only a portion as you will all see. I’m not sure what I am doing wrong here:

:slight_smile:


<html>
  <head>
    <title></title>
    <link type="text/css" href="style/basic-style.css" rel="stylesheet">
  </head>
  <body>
	<div class="table">
	  <div class="table-row-one">
	    <div class="table-cell-one">
		<b>TOPIC 2</b>
		</div>
		<div class="table-cell-two">
		  <b>Linux installation and upgrade (part I)</b>
		</div>
		<div class="table-cell-three">
		  <b>Practical guide to Linux systems administration</b>
		</div>
	  </div> <!-- End of table row -->
	</div> <!-- End of table -->
  </body>
</html>

And the style sheet,

:smiley:


/* Basic stylesheet */

body {
	background-color: #fff;
}

div.table {
	display: table;
	width: 100%;
}

div.table-row-one{
	display: table-row;
}

div.table-cell-one, div.table-cell-two, div.table-cell-three{
	display: table-cell;
}

Any ideas let me know, here is the look and feel I’m actually going for here.

2

Did you give the body {padding:0; margin:0;}

3

Excellent that did the trick. In fact the table did span the whole width of the browser I just could not tell because there was not a background color.

Thanks,
Polyhedra

4

Anytime. :slight_smile:

Thanks for the feedback.