MrDaisy Posted December 3, 2015 Share Posted December 3, 2015 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 } ?> Link to comment Share on other sites More sharing options...
davej Posted December 3, 2015 Share Posted December 3, 2015 table{ table-layout:fixed; width:400px; word-break:break-all; } http://www.w3schools.com/cssref/pr_tab_table-layout.asp Link to comment Share on other sites More sharing options...
MrDaisy Posted December 3, 2015 Author Share Posted December 3, 2015 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.. Link to comment Share on other sites More sharing options...
davej Posted December 3, 2015 Share Posted December 3, 2015 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. Link to comment Share on other sites More sharing options...
ShadowMage Posted December 7, 2015 Share Posted December 7, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now