MrDaisy 0 Posted December 3, 2015 Report 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 } ?> Quote Link to post Share on other sites
davej 251 Posted December 3, 2015 Report 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 Quote Link to post Share on other sites
MrDaisy 0 Posted December 3, 2015 Author Report 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.. Quote Link to post Share on other sites
davej 251 Posted December 3, 2015 Report 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. Quote Link to post Share on other sites
ShadowMage 94 Posted December 7, 2015 Report 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.