I've made a table to act as a frame to lay my website out on but when I set the width of it to 100% and put a background on it I have an edge on the right hand side that won't fill.
Checkout my website linked to my profile and click on the altwebsite 2 link for what im getting.
Here is the code:
<table id="maintable">
<tr id="firstrow">
<th id="header" colspan="3">
</th>
</tr>
<tr id="menu" colspan="3">
<td>
<?php
include 'pagecontent/link.php';
?>
</td>
</tr>
<tr id="secondrow">
<td id="leftcol">
</td>
<td id="maincol">
<?php
include 'pagecontent/main.php';
?>
</td>
<td id="rightcol">
</td>
<td id="footer" colspan="3">
</td>
</tr>
</table>
and the css:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
table {
text-align: center;
border-width: 0;
border-style: none;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
width: 100%;
}
I'am trying to keep it all in a separate stylesheet.
Any help would be brilliant thanks
your id="header" and id="menu" [colspan] is set to 3, but your id="secondrow" has four <td>
Maybe you want this:
<table id="maintable">
<tr id="firstrow">
<th id="header" colspan="3"></th>
</tr>
<tr id="menu">
<td colspan="3">
<?php
include 'pagecontent/link.php';
?>
</td>
</tr>
<tr id="secondrow">
<td id="leftcol"></td>
<td id="maincol">
<?php
include 'pagecontent/main.php';
?>
</td>
<td id="rightcol"></td>
</tr>
<tr id="footer" >
<td colspan="3"></td>
</tr>
</table>
Try
table-layout:fixed;
for your table. I think this should work.
Try to put the attribute width="100%" in the table tag. This sometimes helps even when the css is set to 100% width.
ALSO:
I recreated the same basic code you used, and it was working fine on my machine so my guess is that you have some sort of surrounding div or tag that the table is taking up 100% of.
First things first i want to say thank you for all the replies, really appreciated.
And yeh i had 4 columns with a colspan of 3 thought i set it to another row. For all those table haters out there it helps me visualise the layout.
And thanks again for the help
Add this for your class. It worked for me
tbody, tr {
display: block;
width: 100%;
}
Related
I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.
Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?
Here is an example of what I am trying to acheive:
td {
border: solid black 1pt;
font-family: arial;
font-size: 10pt
}
thead td{
text-align:center;
font-weight:bold;
}
table {
border-collapse: collapse
}
<html>
<body>
<table style="width:35pt;height:24pt;table-layout:fixed">
<thead>
<tr>
<td style="width:35pt;height:12pt">Good</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
</tr>
</tbody>
</table>
<div style="height:50pt"></div>
<table style="width:35pt;height:24pt;">
<thead>
<tr>
<td style="width:35pt;height:12pt">Bad</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
That should fix things.
You can try this:
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
I have code
https://jsfiddle.net/ang3lwish/dnt4pv6m/2/
<div style="border:1px solid yellow;display:block;">
<table border=1 align="center">
<tr>
<th>No.</th>
<th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>Email</th>
</tr>
<tr>
<td>
1.
</td>
<td>
Anto
</td>
<td>
Padang
</td>
<td>
Male
</td>
<td>
anto#gmail.com
</td>
</tr>
</table>
<br>
</div>
I want the div width (in line yellow) is follow table width?
But i don't know how to set css?
Make table width 100% Add this is your table tag
<table border=1 align="center" width="100%">
If you want the table to be fit to the div you need to put 100% width to the table
<table width="100%"> the table adjust itself depending on the div. cheers :)
If you want to follow the yellow line(i.e your div) without css then use width=100% in your table attribute but again only using this will not help you much for setting the table in div properly so better use this:
in css:
.pad
{
padding-top: 25px;
padding-right: 50px;//set as you like them//
padding-bottom: 25px;
padding-left: 50px;
}
and then include this class in table as:
<table border=1 align="center" class="pad">
I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:
<table style="border:solid;width: 100%">
<tr>
<td align="center">
<table style="border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:
<td style="text-align:center">
And this:
<td style="margin: 0 auto">
And the tables keeps in the left-side of the cell. Any suggestions?
You had the right idea with margin:auto 0; just take off the 0.
Working example: http://jsfiddle.net/cxnR8/
<table style="border:solid;width: 100%">
<tr>
<td>
<table style="margin:auto;border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But, more importantly, do you really need to use tables and in-line styling?
Center the table using the deprecated align="" attribute.
<table>
<tr>
<td>
<table align="center">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
Your seccond suggestion is correct. See this working example.
HTML:
<table class="outer">
<tr>
<td>
<table class="inner">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
.outer
{
width: 100%;
border: solid 1px red;
}
.inner
{
width: 25%;
margin: auto;
border: solid 1px blue;
}
I have the following code
<table style="height: 275px; width: 188px">
<tr>
<td style="width: 259px;">
main page
</td>
</tr>
</table>
The main page appears in the center of the cell I want it to appear at the top.
https://developer.mozilla.org/en/CSS/vertical-align
<table style="height: 275px; width: 188px">
<tr>
<td style="width: 259px; vertical-align:top">
main page
</td>
</tr>
</table>
?
Add a vertical-align property to the TD, like this:
<td style="width: 259px; vertical-align: top;">
main page
</td>
Use <td valign="top" style="width: 259px"> instead...
I was facing such a problem, look at the picture below
and here is its HTML
<tr class="li1">
<td valign="top">1.</td>
<td colspan="5" valign="top">
<p>How to build e-book learning environment</p>
</td>
</tr>
so I fix it by changing valign Attribute in both td tags to baseline
and it worked
here is the result
hope this help you
you can use valign="top" on the td tag it is working perfectly for me.
I've temporarily inherited the responsibility to look after the website front end to our project as our web maintainer has just left and there isn't a replacement yet (and I'm a summer student anyway, so I'm off soon too...). I'm not very experienced with HTML/CSS/etc, and I'm having some problems getting a table formatted the way the bosses would like it. The table HTML/CSS (cut down as much as I think I can) is as follows:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
text-align: center;
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="title-details">
<h5>Details</h5>
</div>
<div class="details">
<table class="center">
<tr>
<th class="details-column-left">Title</th>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The text in the table (that is, the header cells text and the standard cells text) is generated server-side based on a database, so the values in them can be quite long or quite short (with a reasonable maximum length). The bosses want it as follows:
The two columns must be justified against each other in the middle, with a small space inbetween.
The table should expand so that all the text in each cell is on the same row.
The title ("Details") should always be centered between the two columns, no matter what the ratio of widths are (as they will normally be about 60:40).
I think I've managed to capture 1 and 2 okay - this table should expand if you add longer th/td s, and it should likewise get smaller if you remove them - but I'm struggling with number 3. I'm just not sure how to do it at all. I've tried using a <caption>, but that didnt help - it's still centered above the entire table, not centered above the column split.
So, I'd appreciate any help getting the table to look 'right'. The only expected browser is apparently Firefox, versions 2 through 3.5 (although pushing 3.5 over 2 mostly). I apologise if I've missed any important information - please just ask and I'll add it.
EDIT:
Screenshot (red lines just for marking centre, not actually on table IRL):
The Solution
Its a bit tricky, but you could do this:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="details">
<table class="center">
<tr><td> </td><td><div style="width: 1px;overflow:visible;text-align: center;margin: -40px;"><h5>Details</h5></div></td><td> </td></tr>
<tr>
<th class="details-column-left">Title</th>
<td width="1"> </td>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td> </td>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td> </td>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td> </td>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td> </td>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td> </td>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
it's, not really clean and tidy, but it should work out just fine
greetz