Tables output differ

[MrDaisy]

Dear all,

 

i am getting the following issue with my tables, as they resize according to text size,

how can make it all same size and auto break text to second line to make it more readable and consistent ( the following image is the test i was running )

 

 

 

 

 

i tried to change the css and do style for table however it didn't work..

 

here my css

 

 

 

/* my style sheet */
body {font-family:verdana;}
body{width:100%;}
a:hover {text-decoration:none; color:red;}
h1 {color:blue; text-align:center;}
h3{
color:Blue;
	text-align:center;
}
p{
	font-size;10pt;
	text-align:center;
	}
header{
	width:75%; 
	padding:10px; 
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border:solid;
	background-color:#8F9779;
	opacity:0.8;
  filter:alpha(opacity=80); /* For IE8 and earlier */
	}
	
nav{
	width:75%; 
	padding:10px; 
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border:solid;
	background-color:#8F9779;
opacity:0.9;
  filter:alpha(opacity=90); /* For IE8 and earlier */
}

main{
	width:75%; 
	padding:10px; 
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border:solid;
	background-color:#8F9779;
	opacity:0.9;
  filter:alpha(opacity=90); /* For IE8 and earlier */
	}

footer{
	width:75%; 
	padding:10px;	
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border:solid;
	background-color:#8F9779;
	opacity:0.9;
  filter:alpha(opacity=90); /* For IE8 and earlier */
	}
	
table{ margin-left:auto;} 
table,th,td {
	border:solid 1px;	
	}

	table.table-style-one {
		font-family: verdana,arial,sans-serif;
		font-size:11px;
		color:#333333;
		border-width: 1px;
		border-color: #3A3A3A;
		border-collapse: collapse;
	}
	table.table-style-one th {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #3A3A3A;
		background-color: #B3B3B3;
	}
	table.table-style-one td {
		border-width: 1px;
		padding: 8px;
		border-style: solid;
		border-color: #3A3A3A;
		background-color: #ffffff;
	}
	body {
    background: no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

li {
    float: left;

}

a:link, a:visited {
    display: block;
    width: 110px;
    font-weight: bold;
   /* color: #3B444B;
     3B444B background-color: #8F9779;*/
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}
/*
a:hover, a:active {
    background-color: #F0FFFF;
}*/
#category ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#category a {
    float: left;
	padding: 0;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid black;
}

#category a:hover {
    background-color:  #F0FFFF;
}

#category li {
    display: inline;
}
.wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
    }
	

 

 

 

and here the code for the tables in the image

 

 

 

       echo "<table class=table-style-one align=center>";

     /*       echo "<tr>";
             //   echo "<th>Review ID</th>";
			//	echo "<th>Posted On:</th>";
                echo "<th>By:</th>";
                echo "<th>Title:</th>";
                echo "<th>Rate:</th>";
                echo "<th>Review</th>";
                
            echo "</tr>";*/
        do{
            // display first review and then fetch rest of the reviews
         //   echo "<tr>";
		 echo "<center>";
		 echo "<br>";
            //    echo "<td>" . $row['Review_ID'] . "</td>";
			echo "<tr><th> Review Number " . $row['Review_ID'] . " For " . $row['Product_Name'] . "</th></tr>";
			echo "<tr><th> Review Title: " . $row['Review_Title'] . " Rated with ". $row['Review_Rate'] . "/5</th></tr>";
			echo "<td><p>This Review is posted on " . $row['Review_Date'] . " By " . $_SESSION['client_name'] . "</align></p></td>";
			echo "<tr><th>Review</th></tr>";
            echo "<td><center>" . $row['Review'] . "</center></td>";
				echo "</center>";
				echo "</table>";
				echo "<table class=table-style-one align=center>";
           // echo "</tr>";
        }while($row = mysqli_fetch_array($result));
        echo "</table>";
		echo "<br>";
		echo "<br>";
        ?>
        </table>
        <?php
    }
		
	
	?>

 

 

[davej]

table{
 table-layout:fixed;
 width:400px;
 word-break:break-all;
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

[MrDaisy]

table{
 table-layout:fixed;
 width:400px;
 word-break:break-all;
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

 

 

i tried this already, it's not working..

[davej]

You need to upgrade your code to an HTML5 doctype. I seem to see some errors in your HTML anyway... and table-based layouts are dead.

[ShadowMage]

Yeah, tables shouldn't be used for layouts. They end up being a nightmare to modify... The image you posted looks like you could use divs and spans to accomplish the desired look. Would be more flexible and easier to adjust as well.

 

As to the issue at hand, just specify a width and the default behavior is for text to wrap and allow the element to grow in height. You could use min/max width if you wanted to allow some variance in width.