Jump to content
Sign in to follow this  
MrDaisy

Tables output differ

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

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...