Jump to content

Tables output differ


MrDaisy
 Share

Recommended Posts

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 )

 

 

XVKhzn4.jpg

 

 

 

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
    }
		
	
	?>

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...